警告：列表中的每个孩子都应该有一个唯一的“键”道具。反应js

Question

我对如何创建一个简单的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;

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

Answer 1

要给数组中的每个元素一个唯一的标识，需要一个键。键帮助React识别哪些项目已更改（添加/删除/重新排序）。

即

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

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

请快速查看官方文档以了解更多说明：https://reactjs.org/docs/lists-and-keys.html

Answer 2

您应该给每一行一个唯一的特定id。如果您不确定id是唯一的，您也可以在箭头函数中使用索引旁边的项目，如以下代码：

{ this.state.list.map((item, index) => {
  return (
    <li key={index}>{item.body}</li>
  )
}))}

Answer 3

简短回答：给出你的

同时检查您的handleInput。你是说id:Date。现在（）？

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

说明：见https://stackoverflow.com/a/43892905