Question

我试图在我的状态中删除数组中的对象。我想通过对map函数中的项使用onclick处理程序来完成此操作。

所以当我点击某个特定项目时，我尝试了很多东西。我试过从map函数传递项目然后过滤掉除了作为参数提供的项目之外的数组尝试了过滤器功能，我尝试过拼接但是所有似乎都不起作用。使用拼接，它总是删除最后一个项而不是我点击的项。

我没看到什么？我知道有很多类似的问题，但我在那里尝试过很多答案，但似乎没什么用。

过滤尝试

JSX

{this.state.product.ingredients.map((item) => {
  return (
     <p className="text-xs text-white bg-brand rounded p-4 mt-2 mb-2 mr-2 inline-block cursor-pointer" key={item.name} onClick={({item}) => this.deleteTag({item})}>{item.name}</p>
  );
})}

方法

deleteTag(item) {

    let product = {...this.state.product};

    product.ingredients.filter((ingredient) => {
        return ingredient !== item;
    });

    this.setState({product: product});
}

剪接

JSX

{this.state.product.ingredients.map((item) => {
  return (
     <p className="text-xs text-white bg-brand rounded p-4 mt-2 mb-2 mr-2 inline-block cursor-pointer" key={item.name} onClick={this.deleteTag}>{item.name}</p>
  );
})}

方法

deleteTag(e) {

    let product = {...this.state.product};

    var index = product.ingredients.indexOf(e.target.value)

    product.ingredients.splice(index, 1);

    this.setState({product: product});

}

具有一个对象的数组示例（对象/项目添加了另一个函数）

ingredients: [{name: 'Salad', value: 1}],

Answer 1

我不确定你是在正确更新你的状态，而是改变它。你能试试这个：

deleteTag(item) {
    this.setState(prevState => { 
      return {
        product: {
           ...prevState.product,
           ingredients: prevState.product.ingredients.filter((ingredient) => ingredient !== item)
        }
      } 
    });
}

修改onClick以从item传递map：

onClick={() => this.deleteTag(item)}

Answer 2

try { dbintial u = new dbintial(); u.printUsers(); } catch (Exception e){ e.printStackTrace(); System.out.println("oh god"); } %>返回一个新数组，而不是修改数组。

filter只会创建一个浅层副本，因此您无论如何都不应该修改{...this.state.product}，这也是您第二次尝试失败的原因。

试试这个：

product.ingredients

Answer 3

您需要将item传递给您的回调。您目前正在使用event.target.value，但您的<p>元素没有value。使用bind部分应用您的回调。

<强> JSX：

{this.state.product.ingredients.map((item) => (
  <p
    className="text-xs text-white bg-brand rounded p-4 mt-2 mb-2 mr-2 inline-block cursor-pointer"
    key={item.name}
    onClick={this.deleteTag.bind(item)}>
    {item.name}
  </p>
))}

回调的第一个参数将是你的item对象，因为部分函数应用程序，它将不再是click事件。（如果您仍然需要click事件，那么它将是第二个参数。）

方式：

deleteTag(item, /* event */) { let product = {...this.state.product}; const index = product.ingredients.indexOf(item.value) product.ingredients.splice(index, 1); this.setState({product: product}); }

从数组中删除对象React

3 个答案: