每個映射項目的顏色變數都會改變順風反應

Question

我希望一旦我在清單中新增另一個項目，前一個項目的顏色就不應更改

const NoteItem = ({ note }) => {
  const { colors, randomColorFunction } = useContext(AppContext);
  const color = randomColorFunction(colors);
  return (
    <div
      className={`flex flex-col min-h-28  py-6 justify-between px-3 rounded-md whitespace-pre-wrap break-words`}
      style={{ backgroundColor: `${color}` }}
    >
      <span className="font-bold text-3xl">{note.title}</span>
      <span>{note.content}</span>
      <small className="text=xl">{note.date}</small>
    </div>
  );
};

Answer 1

你可以用兩種方式解決這個問題

1。使用引用

import { useRef } from "react";

const NoteItem = ({ note }) => {
  const { colors, randomColorFunction } = useContext(AppContext);
  const color = useRef(randomColorFunction(colors));

  return (
    

      ...
    
  );
};

2.使用狀態

import { useState } from "react";

const NoteItem = ({ note }) => {
  const { colors, randomColorFunction } = useContext(AppContext);
  const [color] = useState(randomColorFunction(colors));

  return (
    

      ...
    
  );
};

如果您不想更改顏色，我認為 useRef 更合適。

請參閱此處即時預覽