Question

我的控制台说所有按键都不是唯一的，这就是我的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>
      );
    }
});

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数组来填充无序列表。首先，您应该使用ul填充任何li元素，以及该li元素中的所有内容。

reactjs给你错误的原因是你将key添加到你要返回的元素的子节点而不是根节点，在这种情况下是div。< / p>

另外，你的removeItem函数不起作用，因为它看起来像是在你构建每个任务时被调用，我编辑了我的答案来解决这个问题。

以下内容应该没有问题：

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

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

为什么控制台说我的钥匙不是唯一的？

1 个答案: