Reactjs 警告：列表中的每个子项都应具有唯一的；“关键”；道具React.js

我对如何创建一个简单的todo应用程序的反应和探索方式还不熟悉。我当前收到错误“警告：列表中的每个孩子都应该有一个唯一的“键”道具。” 一切似乎都很好，但我一定是做错了什么

class App extends Component {

  constructor(props) {
    super(props)

    this.state={
      list: [],
      item:{
        body: '',
        id: ''
      }
    }
  }

  handleInput(e) {
    this.setState ({
      item:{
        body: e.target.value,
        key: Date.now()
      }
    })
  }

  addItem(e) {
    e.preventDefault();
    const newItem = this.state.item
    const list = [...this.state.list]
    list.push(newItem)
    console.log(list)
    this.setState ({
      list,
      item:{
        body: '',
        id: ''
      }
    })
  }

  render() {
    return (
      <div className="App">
        <h1>To Do List</h1>
        <form>
          <input
          type='text'
          placeholder='enter a new Todo'
          value={this.state.item.body}
          onChange={this.handleInput.bind(this)}
          >
          
          </input>
          <button onClick={this.addItem.bind(this)}>
            submit
          </button>
        </form>
        <br/>
        
          {this.state.list.map(item => {
            return (
              <li>{item.body}</li>
            
            )
          })}
        
      </div>
    );
  }
}

export default App;

类应用程序扩展组件{
建造师（道具）{
超级（道具）
这个州={
名单：[]，
项目：{
正文：“”，
id:“”
}
}
}
手动输入（e）{
这是我的国家({
项目：{
主体：即目标价值，
关键字：Date.now（）
}
})
}
增补（e）{
e、 预防默认值（）；
const newItem=this.state.item
const list=[…this.state.list]
list.push（newItem）
console.log（列表）
这是我的国家({
列表
项目：{
正文：“”，
id:“”
}
})
}
render（）{
返回(
待办事项清单
提交


{this.state.list.map（项=>{
返回(
{item.body}
)
})}
);
}
}
导出默认应用程序；

---

如果有人能帮上忙，那就br太好了/解释为什么会发生这个错误那就太好了。

简短回答：给你的

{item.body}

一个唯一的键。像

{item.body}

同时检查您的

handleInput

。你是说

id:Date.now（）

handleInput（e）{
这是我的国家({
项目：{
主体：即目标价值，
key:Date.now（）//您应该为每一行指定一个唯一的id。如果您不确定id是否唯一，您还可以使用箭头函数中项目旁边的索引，
像这样的代码：

{this.state.list.map（（项，索引）=>{
返回(
{item.body}
)
}))}
要为数组中的每个元素提供唯一标识，需要一个键。键有助于识别哪些项已更改（添加/删除/重新排序）

i、 e

const number=[1,2,3,4,5]；
const listItems=numbers.map（（number）=>

{number}

);

请记住，如果使用不稳定的密钥，react将导致性能下降和意外行为

请快速查看官方文档以获取更多说明：
因此我才意识到这是一个打字错误，handleInput方法中我的“key”值的名称不正确。
@TheMayrof查看我的编辑。在您的
handleInput
中，您可能指的是
id
而不是
key
。
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);