在不迭代时，如何解决数组中元素的esint缺少键prop的问题

Question

对于以下代码，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>
);
}

Answer 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()}`}>)