React TS中Select/Option组件key非prop警告的原因与解决

问题现象 #

切换下拉选项时出现以下警告：

Warning: option: key is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop.

问题代码 #

interface IDropDownProps {
  values: string[];
  handler: (e: React.ChangeEvent<HTMLSelectElement>) => void;
}

const DropDown = ({ values, handler }: IDropDownProps) => {
  return (
    <select onChange={handler}>
      {values.map((value, index) => (
        <option key={index}>{value}</option>
      ))}
    </select>
  );
};

function App() {
  const values = ["1", "2", "3"];

  const valueHandler = (e: React.ChangeEvent<HTMLSelectElement>) => {
    console.log(e);
  };

  return (
    <>
      <DropDown values={values} handler={valueHandler} />
    </>
  );
}

export default App;

疑问 #

怀疑问题出在valueHandler函数中访问事件对象e的操作，且打印e.target.value时不会出现错误，请问该问题的原因是什么，如何解决？

原因分析 #

这个警告的核心是：当直接console.log(e)时，浏览器会深度遍历整个React合成事件对象，而该事件对象内部保留了对应虚拟DOM节点的引用，其中包含option元素的key属性。但key是React的特殊属性，它不会被作为props传递给元素或组件，所以当遍历到这个属性时，React就抛出了警告。

而打印e.target.value时，仅访问事件对象的浅层属性，不会触发深度遍历，因此不会触发警告。

另外，用index作为key本身不是最佳实践，但这不是当前警告的直接原因，不过后续建议改用唯一值作为key，避免其他潜在问题。

解决方法 #

• 避免直接打印整个事件对象：调试时只打印需要的属性，比如e.target.value、e.target.selectedIndex等。
• 如需查看完整事件对象：先将事件对象转为普通副本再打印，示例：

  const valueHandler = (e: React.ChangeEvent<HTMLSelectElement>) => {
    console.log({ ...e });
  };
  

  这种方式只会复制事件对象的可枚举属性，不会触发内部引用的深度遍历，也就不会触发警告。
• 优化key的使用：因为你的values数组元素本身是唯一的，直接用value作为key即可：

  {values.map((value) => (
    <option key={value}>{value}</option>
  ))}
  

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