Question

我正在尝试删除一个项目，该项目是我从ReactJS的列表中删除的。列表项被声明为单独的组件。当我单击删除按钮时，它会删除该项目，但是在列表中，最后一个项目总是消失。

我在父组件中编写了delete函数，并通过props将其发送到子项，然后从该项调用此函数。

父组件：

deleteProtoItem = (protoKey) => {
 return e => {
  if (!isUndefined(e)) {
   e.preventDefault();
  }

  const {protocolTasks} = this.state;
  const newProtocolTasks = protocolTasks;
  newProtocolTasks.splice(protoKey, 1);
  this.setState({protocolTasks: newProtocolTasks});
 }
}

在“父”组件中渲染项目：

<div>
 {
  _.map(protocolTasks, (task, taskKey) =>
   <ProtoTaskItem 
    key={taskKey}
    deleteProtoItem={this.deleteProtoItem(taskKey)}
   />
  )
 }
</div>

Child组件中props的调用函数：

 const {deleteProtoItem} = this.props;
 ...
 <a onClick={deleteProtoItem}>Delete</a>

对我而言，最有趣和最古怪的事情是，拼接实际上删除了确切的项目，但是在浏览器中，只有最后一个项目消失了。

删除第二项后的结果： The browser image of the list The actual array after deleting the second item

从数组中删除项目后，它会在数组中删除，但会在ReactJS中消失浏览器中的最后一个项目

0 个答案: