React渲染<option>列表报子元素需唯一key prop警告问题求助

你遇到的key警告根源是手动追加到profiles数组的空<option>元素没有设置key属性。
你在profileValues.map阶段给生成的3个选项都加了key，但后续执行profiles.push(<option value=''></option>)时，新增的这个空选项没有传入key，React渲染<select>下的子元素列表时，检测到最后一个子元素缺失唯一key，就会持续抛出警告。
之前尝试修改map项的key、甚至用Math.random()生成key都没效果，是因为你始终没给漏加key的这个手动push的选项补key。另外不要用Math.random()作为key值，会导致React每次重渲染都销毁重建对应DOM，引发不必要的性能损耗，甚至可能出现输入状态丢失的问题。

两种改法都可以解决问题：

• 最直接的修复：给手动push的空选项补充唯一key

  // 原代码 profiles.push(<option value=''></option>);
  // 修改为
  profiles.push(<option key="empty" value=''></option>);
  

• 更易维护的写法：不要先构造数组再push，直接在JSX中渲染选项，避免漏加key：

  <select
      value={profile}
      id='profile'
      name='profile'
      onChange={(e: any) => setProfile(e.target.value)}
  >
      {/* 空选项直接写在这里，补上key */}
      <option key="empty" value=''></option>
      {profileValues.map((profileItem: Profile) => {
          // 这里用枚举值本身当key，比数组索引更稳妥，因为枚举值是固定唯一的
          return <option key={profileItem} value={profileItem}>{profileItem}</option>
      })}
  </select>
  

改完之后控制台的key警告就会消失。

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