使用没有键道具的数组的 React setstate 警告

Question

嗨，我正在使用带有数组映射的 React，在用户点击功能中，我需要检查用户按下哪个按钮并将按钮按下设置为真，其余设置为假，我附加的代码工作正常但我有问题我在哪里可以把 key(id/index) 道具放在里面，以消除每个孩子的警告应该有唯一的钥匙…………

    const initialStates = [
        true,
        false,
        false,
        false,
        false,
    ]
    const handleshow = (clicked_idx) => {
        console.log("you click on " ,clicked_idx, "index")
        setShow(initialStates.map((key,idx) => idx === clicked_idx ? true:false))
        setShowText(clicked_idx)
    } 

我的 jsx 代码是

const timewordings = [
        {
            year    : 2017,
            title   : 't1',
            content : 'c1'
        },
        {
            year    : 2018,
            title   : 't2',
            content : 'c2'
        },
        {
            year    : 2019,
            title   : 't3',
            content : 'c3'
        },
        {
            year    : 2022,
            title   : 't4',
            content : 'c4'
        },
        {
            year    : 2023,
            title   : 't5',
            content : 'c5'
        },
    ] 
  <div className='absolute top-1/3 flex flex-col gap-10'>
                                {timewordings.map((timewording,index)=>
                                    <div className='z-1 flex flex-row gap-5 text-[#d4a024] italic cursor-pointer'>
                                        <div className={`-translate-y-2 -translate-x-[0.24rem] text-4xl ${(show[index])?"scale-100":"scale-0"}`}>.</div>
                                        <div className='text-5xl' key={index} onClick={(e) => handleshow(index)}>{timewording.year}</div>

如果有人能提供帮助，我将不胜感激

Answer 1

在您提供的代码中，在 timewordings.map() 函数中迭代的最外层 div 元素中缺少 key 道具。 key 属性很重要，因为它可以帮助 React 在渲染元素数组时跟踪哪些元素已更改、添加或删除。

要解决这个问题，您可以向最外层的 div 元素添加一个唯一的 key 属性，如下所示：

<div key={index} className='z-1 flex flex-row gap-5 text-[#d4a024] italic cursor-pointer'>

注意，通常建议使用唯一标识符作为 key prop，而不是数组中元素的索引，尤其是在数组中元素的顺序可以更改的情况下。如果 timewordings 数组中的每个元素都有唯一标识符，则可以使用它代替索引。例如：

<div key={timewording.year} className='z-1 flex flex-row gap-5 text-[#d4a024] italic cursor-pointer'>

Answer 2

将密钥添加到您的按钮。我猜你正在做类似在你的 JSX 中的事情：

{
   initialStates.map((s, idx) => <button key={idx} onClick={() => handleShow(idx)}>button</button>)
}

OP 后编辑：给 .map 中的父元素键

timewordings.map((timewording,index)=>
<div key={index} className='z-1 flex flex-row gap-5 text-[#d4a024] italic cursor-pointer'>
  <div className={`-translate-y-2 -translate-x-[0.24rem] text-4xl ${(show[index])?"scale-100":"scale-0"}`}>.</div>
  <div className='text-5xl' key={index} onClick={(e) => handleshow(index)}>{timewording.year}</div>
</div>