为什么控制台说我的密钥不是唯一的？答案

【问题标题】：Why console says my keys are not unique?为什么控制台说我的密钥不是唯一的？
【发布时间】：2017-05-16 13:23:16
【问题描述】：

我的控制台说所有键都不是唯一的，这就是我的 removeItem 函数不起作用的原因。我正在尝试使用 React.js 制作待办事项列表，现在我正在添加删除按钮。你能帮助我吗？代码如下：

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>
      );
    }
});

【问题讨论】：

当您将一个函数传递给 .map 时，您可以访问 2 个参数、您在数组中的映射的当前项和一个“索引”。您可以将此索引用作元素的键，而无需手动生成索引。例如：function createTasks(item, index) {
i.key -- i 是一个类似 3、4 或 5 的数字。而且你无法读取它的属性 i.key，它只是没有定义什么是 key数字。 i 代表索引，而不是项目。应该是itemArray[i].key

标签： javascript reactjs key

【解决方案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 填充任何ul 元素，以及该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>
  );
}

已编辑：我误读了问题的一部分，并编辑了我的答案。

【讨论】：