Question

我有一个名字的状态值，它是一个数组。我很难理解如何使用lodashs删除项目。查看我理解的文档传递当前数组，然后回调但我不确定我做错了什么。

所以我的删除方法如下：

removeItem(oldItem) {
_.remove(this.state.names, name => name === oldItem);
}

当我映射数组中的所有名称时，我将此方法附加到按钮。

let test = this.state.names.map((name, index) => {
      return (
        <div>
        <li key={index}>{name}</li>
        <button onClick={this.removeItem(name)}>Delete</button>
        </div>
      )
    })

感谢帮助谢谢。

Answer 1

您需要做两件事

您希望将函数绑定到事件，而不是将函数的结果绑定到事件。

所以你应该改变

<button onClick={this.removeItem(name)}>Delete</button>
// This one tell React, when someone click this button, void! (aka. do nothing) because that is the result of 'this.removeItem(name)'

要

<button onClick={() => this.removeItem(name)}>Delete</button>
// This one tell React, when someone click this button, call the '() => this.removeItem(name)' function

你需要_.filter而不是_.remove因为_.remove不会返回你的新数组，它会改变数组并返回被删除的元素。在大多数情况下，你不想要变异，你想要一个全新的数组设置状态。

所以不要这样。

removeItem(oldItem) {
  _.remove(this.state.names, name => name === oldItem);
}

这样做

removeItem(oldItem) {
  // use filter to get new array without oldItem,
  // and setState it to trigger React render.
  this.setState({
    names: _.filter(this.state.names, name => name !== oldItem),
  });
}

Answer 2

我不确定您是否可以通过这种方式从React状态中删除项目。

您应该使用setState（）方法。尝试在你的＆＃34; removeItem＆＃34;中做这样的事情。方法

removeItem(oldItem) { 
  const names = _.remove(this.state.names, name => name === oldItem); 
  this.setState({names:names}); 
}

lodash从数组React中删除方法

2 个答案: