Javascript 从数组中删除对象

我正在尝试删除处于我的状态的数组中的对象。我想通过对映射函数中的项使用onclick处理程序来实现这一点

因此，当我点击一个特定的项目，我尝试了很多事情。我尝试了filter函数，尝试从map函数中向下传递项，然后过滤掉数组（不包括作为参数提供的项），我尝试了拼接，但似乎都不起作用。使用splice时，它总是删除最后一个项目，而不是我单击的项目

我没有看到什么？我知道有很多类似的问题，但我已经尝试了很多答案，但似乎没有任何效果

过滤试验

JSX

拼接

JSX

带有一个对象的数组示例（对象/项与另一个函数一起添加）

---

filter

返回一个新数组，而不是就地修改数组

{…this.state.product}

只创建了一个浅拷贝，因此无论如何都不应该修改

product.components

，这也是您第二次尝试失败的原因

试试这个：

this.setState(prevState => ({
  product: { ...prevState.product, ingredients: prevState.product.ingredients.filter(...) },
}));

---

我不确定你是否正确地更新了你的状态，而是改变了它。你能试试这个吗

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

编辑onClick以从

map

传递

项目：

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

您需要将
项
传递给回调函数。您当前正在使用
event.target.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>
))}

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

  product.ingredients.splice(index, 1);
  this.setState({product: product});
}

嗯，它返回了一个错误，说编译失败。我猜是语法错误？在哪一行？你确定所有文件都保存了吗？@Gijsberts我想是额外的括号造成的，请尝试更新的代码段。好吧，我想该函数可以工作，只是它没有更新任何内容。所以我猜过滤函数出了问题，因为我猜项目是未定义的或是其他什么。。回拨有问题。我通过了吗？（项目）@Gijsberts我明白了，你需要更新你的
onClick
处理程序。签出编辑。嗯，它返回一个错误，表示编译失败。我猜是语法错误？用原始的
过滤器
参数替换
过滤器（…）
；我使用了
…
作为实际逻辑的占位符。为什么
e
不是
项
？将它记录到控制台将看到它不是您所认为的。然后将索引arrrayHey中的
项
。得到与以前相同的结果，由于某些原因，当我单击它时，它将删除/删除数组中的最后一个对象，而不是我单击的对象
this.setState(prevState => ({
  product: { ...prevState.product, ingredients: prevState.product.ingredients.filter(...) },
}));

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

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

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

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

  product.ingredients.splice(index, 1);
  this.setState({product: product});
}