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

【问题标题】：Warning: Each child in a list should have a unique "key" prop. React.js警告：列表中的每个孩子都应该有一个唯一的“关键”道具。反应.js
【发布时间】：2020-12-30 10:20:33
【问题描述】：

我是新来的反应和探索创建简单待办事项应用程序的不同方法的新手。我目前收到错误“警告：列表中的每个孩子都应该有一个唯一的“关键”道具。” 一切似乎都正常，但我一定做错了什么。

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;

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

【问题讨论】：

标签： reactjs error-handling

【解决方案1】：

所以我才意识到这是一个错字，我在 handleInput 方法中的“key”值被错误地命名了。

【讨论】：

【解决方案2】：

要为数组中的每个元素提供唯一标识，需要一个键。键可帮助 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

【讨论】：

【解决方案3】：

您应该为每一行指定一个唯一的特定 ID。如果您不确定 id 是否唯一，也可以在箭头函数中的 item 旁边使用 index，像这样的代码：

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

【讨论】：

【解决方案4】：

简答：给您的<li>{item.body}</li> 一个唯一的密钥。赞<li key={item.id}>{item.body}</li>

还要检查你handleInput。你是说id: Date.now()吗？

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

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

【讨论】：

@TheMayerof 看到我的编辑。在您的 handleInput 中，您的意思可能是 id 而不是 key。