React.jsの循環時に発生する問題に関する警告警告：同じキーを持つ2人の子供に遭遇しました。

Warning About Problems That Occur When Circulation React

警告：同じキーを持つ2人の子供に遭遇しました

空のデータを送信すると、循環に反応し、誤って警告する場合があります。

Warning: Encountered two children with the same key, ``. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
in ul (at TodoList.js:33)
in TodoList (at src/index.js:5)

私が特定のコードを書いていることをお見せするためにここにいます。

render() { return ( <Fragment> <div> <label htmlFor='inputArea'>Please enter content</label> <input id='inputArea' className='input' value={this.state.inputValue} onChange={this.handleInputChange} /> <button onClick={this.handleBtnClick}>submit</button> </div> <ul> {this.getTodoItem()} </ul> </Fragment> ) } getTodoItem() { return this.state.list.map((item,index) => { return ( <TodoItem key={item}// Here I use the item as a key value content={item} index={index} deleteItem={this.handleItemDelete} /> ) }) }

アイテムをキー値として使用するとエラーが発生するため、テストで誤ったアラームが検出されなかった後、キーインデックスの値を変更します。したがって、このエラーの値はキー警告です。

getTodoItem() { return this.state.list.map((item,index) => { return ( <TodoItem key={index}// key here is change the value of index content={item} index={index} deleteItem={this.handleItemDelete} /> ) }) } Solution: key in the current page to find the key to ensure the uniqueness of the