React js-状态从值数组更改onclick-“未捕获的不变违规”错误

Question

具有一系列颜色选项，想要创建这些项目的动态列表，然后在单击时将状态更改为所选颜色。

这是我当前的代码：

Uncaught Invariant Violation: Objects are not valid as a React child

收到以下错误

passport.js

我真的无法输出状态吗？我该如何解决

Answer 1

从Source函数中删除参数thecolor或将其重命名为某个东西，这会给您带来错误，因为该变量是在映射函数onClick中声明的

map((thecolor)

setColorSelections() {
  const colorItems = colors.map((thecolor) =>
    <li
      onClick={(event) => this.setCurrentColor(thecolor)}
      key={thecolor} >
      {thecolor}
    </li>
  );
  return (
    <ul>
      {colorItems}
    </ul>
  )
}