Reactjs react 警告：列表中的每个子元素都应该有一个独特的 keys props ，即使我已经设置了 keys

发布于03月05日

在try 映射数组并返回JSX时，我收到警告"列表中的每个子元素都应该有一个唯一的"键"props ".

以下是我编写的代码:

<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>

谁能告诉我如何解决这个问题，或者告诉我我做错了什么？谢谢!

我知道在Reaction中呈现列表时需要设置关键点.在过go 的大多数 case 中，我都做得很好，除了这个 case .

推荐答案

console.log(optionsList)，看看问题出在哪里.
我看到你有key号房产，但这可能发生在

option未定义或为空
option.id未定义或为空
有些物品有相同的id

但是，您可以使用map函数的第二个参数来始终具有唯一的key:

{
  props.optionsList.length > 0 &&
    props.optionsList.map((option,index) => (
      <option
        value={option.value}
        disabled={option.disable ? true : false}
        key={index}
        selected={option.selected}
      >
        {option.textContent}
      </option>
    ));
}

但您应该首先找出导致此警告的原因，因为建议使用key ={option.id}，如果没有问题，应该可以使用