React数组映射缺失key props警告：点击状态切换的key放置问题

你的问题出在key属性的放置位置不对——React要求**key必须加在map()返回的最顶层元素上**，而不是内部嵌套的子元素。

看你的JSX代码，timewordings.map()每次返回的是外层的<div className='z-1 flex flex-row gap-5...'>，这个才是每个映射项的根节点，你之前把key放在了里面的年份div上，这不符合React的要求，所以才会触发警告。

修复后的代码 #

<div className='absolute top-1/3 flex flex-col gap-10'>
    {timewordings.map((timewording, index) =>
        // 把key移到map返回的最外层div上
        <div 
            className='z-1 flex flex-row gap-5 text-[#d4a024] italic cursor-pointer'
            key={timewording.year} // 用year当key比index更靠谱，因为year是唯一稳定的标识
            onClick={(e) => handleshow(index)} // 把点击事件移到外层div，用户点整个区域都能触发，体验更好
        >
            <div className={`-translate-y-2 -translate-x-[0.24rem] text-4xl ${show[index] ? "scale-100" : "scale-0"}`}>.</div>
            <div className='text-5xl'>{timewording.year}</div>
        </div>
    )}
</div>

额外优化点 #

• 别用index当key（除非万不得已）：你的数组里每个项的year是唯一值，用它做key比index更稳定。如果以后数组有增删元素，index会变化，可能导致React渲染出问题，而year不会。
• 简化状态更新逻辑：你当前的handleshow里用initialStates.map没必要，直接基于上一次的show状态更新更合理：

const handleshow = (clicked_idx) => {
    console.log("you click on ", clicked_idx, "index")
    setShow(prevShow => prevShow.map((_, idx) => idx === clicked_idx))
    setShowText(clicked_idx)
}

这样不用依赖外部的initialStates，逻辑更健壮。

内容的提问来源于stack exchange，提问作者Man Man Yu