当我试图Map一个数组并返回JSX时，我收到了警告"列表中的每个子元素都应该有一个唯一的"键"属性"。
下面是我写的代码：
<select>
{props.optionsList.length > 0 &&
props.optionsList.map((option) => (
<option
value={option.value}
disabled={option.disable ? true : false}
key={option.id}
selected={option.selected}
>
{option.textContent}
</option>
))}
</select>有没有人能告诉我如何解决这个问题或者告诉我我做错了什么？谢谢!
我知道在React中呈现列表时需要设置键，对于大多数情况，我都做得很好，除了这个例子。
1条答案
按热度按时间omtl5h9j1#
console.log(optionsList)并查看问题所在。我知道你有
key属性，但是如果option未定义或为空option.id未定义或为空1.某些项目具有相同的
id但是，您可以使用
map函数的第二个参数来始终拥有唯一的key：但您应该首先找到导致此警告的原因，因为建议使用
key ={option.id}，如果没有问题，应该可以使用