React+Tailwind列表项新增时旧项颜色重置问题求助

问题原因 #

每次父组件列表更新（添加新项）时，所有NoteItem组件都会重新渲染，而你在组件渲染阶段直接调用randomColorFunction生成颜色，导致旧项的颜色被重新计算覆盖。

两种可行解决方案 #

方案1：创建笔记时分配固定颜色 #

在创建新笔记的逻辑里，直接生成颜色并和标题、内容、日期一起存入note对象。这样每个笔记的颜色从创建起就固定，不会随组件渲染改变。

示例代码：

// 假设创建笔记的函数
const createNote = (title, content) => {
  const { colors, randomColorFunction } = useContext(AppContext);
  const newNote = {
    id: Date.now(), // 生成唯一标识
    title,
    content,
    date: new Date().toLocaleString(),
    color: randomColorFunction(colors) // 创建时分配固定颜色
  };
  // 将newNote添加到笔记列表中
};

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

方案2：在组件内缓存颜色 #

如果不想修改note的数据结构，可以用useMemo基于note的唯一标识（比如id）缓存颜色，确保只有当note的唯一标识变化时才重新计算颜色（只要id不变，颜色就固定）。

示例代码：

const NoteItem = ({ note }) => {
  const { colors, randomColorFunction } = useContext(AppContext);
  // 以note的唯一id作为依赖，缓存颜色值
  const color = useMemo(() => {
    return randomColorFunction(colors);
  }, [note.id, colors, randomColorFunction]);

  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>
  );
};

注意：如果你的note对象没有唯一id，建议给每个note添加一个唯一标识（比如用Date.now()或uuid库生成），这样才能准确缓存每个note的颜色。

内容的提问来源于stack exchange，提问作者Hemant Sharma