javascript - react esLint 错误 : Missing "key" prop for element in array

Question

这是我的代码

<RadioButtons
  type="test"
  field="test"
  optionInclude={['1', '2', '3']}
  optionOrder={['1', '2', '3']}
  updateValue={[
      { key: '1', value: 'test' },
      { key: '2', value: 'test2' },
      { key: '3', value: 'Other' }
  ]}
  icons={[
      <Icon variant="male" size={35} />,
      <Icon variant="female" size={35} />,
      <Icon variant="plus" size={35} />
  ]}
/>

运行 EsLint 时出现此错误:
70:33 error Missing "key" prop for element in array react/jsx-key
71:33 error Missing "key" prop for element in array react/jsx-key
72:33 error Missing "key" prop for element in array
第 70 - 72 行是 Icons数组，这就是错误所指的内容。
RadioButtons 的 PropTypes组件是

RadioButtons.propTypes = {
    ...
    icons: PropTypes.array,
};

我认为此错误是因为您在没有 key Prop 的情况下进行迭代。

Answer 1

由于这个问题没有答案，我将重申评论中的内容:当您重复 React 中的任何元素(包括您的自定义 Icon 元素)时，那些重复的元素必须都具有 key定义的属性。
关于虚拟 DOM 的详细说明，供好奇的人使用
原因与 React 的 Virtual DOM 有关。对 React 的简单理解是这样的:

React 将你的组件渲染到页面的 DOM

事件发生，改变状态

React 将使用该状态的组件重新渲染到 DOM

但如果就这么简单，React 将非常浪费。例如，假设您有一个 <ul> ...

<ul>
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
  <!--... -->
  <li>Item #25</li>
</ul>

(假设你使用 map 在 React 中生成它，但你如何准确地制作 <ul> 是无关紧要的。)
现在，假设您将第 25 项移动到列表中的第一项:如果您只是重新渲染所有内容，则必须重新渲染 25 <li>元素......即使只有其中一个发生了变化。
为了避免这种不必要的(并且非常昂贵的，性能方面的)DOM 更改，React 使用 DOM 的副本，称为虚拟 DOM，实际过程看起来更像:

React 将你的组件渲染到页面的 DOM

事件发生，改变状态

React 将使用该状态的组件重新渲染到虚拟 DOM

React 对新旧虚拟 DOM 进行“差异”处理，只更新虚拟 DOM 中更改的部分的实际 DOM

这是使用 React 的主要性能增强(相对于使用 JQuery 的 .html() 方法来完成相同的事情)!
但是您还记得我们刚才将项目#25 移到#1 时吗？从 React 的 Angular 来看，这可能是 #25 到 #1 的移动......或者可能是删除 #25 并插入一个全新的 <li>在＃1 ...或者它可能是一系列更新(＃1 => 25，＃2 =>＃1，＃3 =>＃2，...)
换句话说，React 无法神奇地知道哪个 <li>是哪个。如果每个元素都没有唯一标识符，移动的元素可能看起来像是被删除/创建的东西，或者像很多东西被更新了。
这就是 key prop 出现:每当你重复元素(比如那些 <li> s)，React 很难区分它们......但它需要能够使用 Virtual DOM 来让你的应用程序更快。
这就是为什么不需要为每个重复的元素添加一个键(如果你不这样做，React 仍然可以工作)......但是你会收到很多关于它的警告......因为这意味着你正在制作你的应用程序不必要的慢。