私のキーが一意ではないとコンソールから伝えられるのはなぜですか？

Question

私のコンソールによれば、すべてのキーは一意ではないので、removeItem関数が機能しません。 React.jsでTo-Doリストを作成しようとしていますが、今では削除ボタンを追加しています。手伝って頂けますか？

var TodoItems = React.createClass({ //This is the removeItem function, that takes the key as a parameter and compares i.key to parameter. 

    removeItem: function(key){ 
    var itemArray = this.props.entries; 
    for (var i = 0; i < itemArray.length; i++) 
     if (itemArray[i.key] === key) { 
      itemArray.splice(i, 1); 
      break; 
     } 
    }, 

    render: function() { 
    var todoEntries = this.props.entries; 
    var _removeItem = this.removeItem; 

    function createTasks(item) { 
     return (
     <div> 
      <li key={item.key}>{item.text}</li> 
      <button onClick = {_removeItem(item.key)} className= "remove"> Remove </button> 
     </div> 
    ); 
    } 

    var listItems = todoEntries.map(createTasks); 

    return (
     <ul className="theList"> 
     {listItems} 
     </ul> 
    ); 

    } 
}); 


var TodoList = React.createClass({ 
    getInitialState: function() { 
    return { 
     items: [] 
    }; 
    }, 

    addItem: function(e) { 
    var itemArray = this.state.items; 

    //Here I create the key: 

    itemArray.push(
    { 
    text: this._inputElement.value, 
    key: Math.random().toString(36).substring(7) 
    } 
); 

this.setState({ 
    items: itemArray 
}); 

this._inputElement.value = ""; 

e.preventDefault(); 


}, 

    render: function() { 
     return (
     <div className="todoListMain"> 
      <div className="header"> 
      <form onSubmit = {this.addItem}> 
       <input ref={(a) => this._inputElement = a} 
       placeholder="enter task"> 
       </input> 
       <button type="submit">add</button> 
      </form> 
      </div> 
      <TodoItems entries={this.state.items}/> 
     </div> 
    ); 
    } 
}); 

Answer 1

問題はあなたのcreateTasks機能内にある：ここでは、コードです。

function createTasks(item) { 
    return (
    <div> 
     <li key={item.key}>{item.text}</li> 
     <button onClick = {_removeItem(item.key)} className= "remove"> Remove </button> 
    </div> 
); 
} 

並べ替えられていないリストにはdivsの配列が返されます。最初に、要素をliとし、内容はli要素内に入れる必要があります。

reactjsでエラーが発生するのは、ルートノードではなく戻りたい要素の子にkeyを追加しているためです（この場合はdiv）。

また、各タスクをビルドしているときに呼び出されているように見えるため、removeItem関数が機能していません。これを解決するために私の答えを編集しました。

問題なく動作するはずです以下：

function createTasks(item) { 
    return (
     <li key={item.key}> 
      {item.text} 
      <button onClick = {this.removeItem.bind(this, item.key)} className= "remove"> Remove </button> 
     </li> 
); 
} 

編集：私は質問の一部を読み違えて、私の答えを編集しました。