Question

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

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;

如果有人可以帮助您，那就很棒/解释为什么发生此错误，那将是很好的。

Answer 1

简短的回答：为您的<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

Answer 2

您应为每行指定一个唯一的特定ID。如果您不确定ID是唯一的，还可以在箭头功能中的项目旁边使用索引，像这样的代码：

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

Answer 3

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

即

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

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

快速浏览一下官方文档以获取更多插图：https://reactjs.org/docs/lists-and-keys.html

Answer 4

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

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

4 个答案: