已添加唯一key prop仍报错？React列表key问题求助

你遇到的问题根源是key属性加错了位置：React要求列表循环中返回的顶层元素必须拥有唯一key，而不是它的子元素。

你的代码里，map循环返回的直接元素是<React.Fragment>，但你把key={user._id}加在了Fragment内部的<div>上，React无法识别这个key，所以依然会抛出警告。

修改后的代码： #

render() {
  return (
    <div className="App">
      {this.state.users.map((user) => {
        return (
          // 把key移到React.Fragment上
          <React.Fragment key={user._id}>
            <div className="box">
              <h3>{user.name}</h3>
              <h4>{user.email}</h4>
              <button
                onClick={() => {
                  this.beginEdit(user);
                }}
              >
                Update
              </button>
              
              <button
                onClick={() => {
                  this.deleteUser(user);
                }}
              >
                Delete
              </button>
            </div>
          </React.Fragment>
        );
      })}
      {this.renderAddUser()}
    </div>
  );
}

关键说明： #

• 当使用map生成列表时，React会将每个循环返回的最外层元素视为列表项的标识，因此key必须绑定在这个最外层元素上。
• 如果你用的是Fragment的短语法<>...</>，是无法添加key属性的，必须显式写出<React.Fragment>才能绑定key。

修改后，控制台的"key" prop警告就会消失。

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