不迭代时如何解决数组中元素的eslint缺少关键道具？

Posted 2023-03-27

【中文标题】不迭代时如何解决数组中元素的eslint缺少关键道具？

【英文标题】：How to resolve eslint missing key prop for element in array when not iterating?

【发布时间】：2022-01-16 18:30:32

【问题描述】：

对于以下代码，eslint 为 react/jsx-key: Missing 'key' prop for element in array 引发错误。

我知道我需要向我的数组添加键，但我不知道在哪里以及如何！

我该如何解决？

export default function App() 
  const [step, setStep] = useState(0);

  function handleClick() 
    setStep((step) => [1, 2, 0][step]);
  

  const ComponentList = [
    <div>Step 1</div>,
    <div>Step 2</div>,
    <div>Step 3</div>
  ];

  return (
    <div>
      <button onClick=handleClick>Increment Step</button>
      ComponentList[step]
    </div>
  );

【参考方案1】：

不建议使用索引作为键，您应该使用唯一标识符，但以此为例。

export default function App() 
      const [step, setStep] = useState(0);

      function handleClick() 
        setStep((step) => [1, 2, 0][step]);
      

      const ListItem = (step) => (<div>`Step $step`</div>)

      return (
        <div>
          <button onClick=handleClick>Increment Step</button>
          <ListItem item=step>
        </div>
      );
    

在此示例中，ListItem 甚至不需要键，因为我们没有遍历数组。但如果它是一个数组，那就是：

list.map(step => <ListItem step=step key=`list-item-$step.toString()`>)