Javascript 如何正确地更改React中元素的样式，而不使其在更新状态时不断更改？

我的问题有点模棱两可，主要是因为我很难用正确的词来提出更精确的问题。然而，我认为我的例子应该说明得很清楚

我正在用React创建一个todo列表，当我向列表中添加todo时，它还具有一个内嵌标记颜色，使其看起来更“美观”。我希望此颜色是我存储在数组中的随机颜色之一

这里我的代码笔展示了我的结果中发生的一个例子；一旦我添加了一个带有标记颜色的任务，当添加第二个任务时，在输入的

onChange

属性上，我的todo颜色会随着状态的改变而改变，并且会重新呈现组件（至少，我认为是这样）。如何防止这种情况发生，并在每个todo任务中存储一种随机颜色

---

将Todo添加到状态并将颜色放入状态时，需要生成颜色，例如在Todo对象本身上

例如，在

addHandler

中：

const currentTodo = this.state.currentTodo;
const markerColors = ['#F8C8C8', '#C0F5E6', '#C5C5F9', '#F5EFC0'];
currentTodo.color = markerColors[getRandomInt(0, markerColors.length)];

并从

createList

函数中删除该代码，只留下

const colorObj = {
  background: todo.color,
}

我在这里修改了你的代码笔：