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

我认为这个错误是由于您在没有关键道具的情况下进行迭代而造成的。

Answer 1

因为这个问题没有答案，所以我只想重申一下注释中的内容：当您在React中重复 any 元素（包括您的自定义Icon元素）时，这些重复的元素必须全部定义了key个属性。

React esLint错误：数组中元素缺少“键”属性

1 个答案: