從數組React刪除對象

Question

我正在嘗試刪除處於狀態的數組中的對象。 我想通過對地圖功能中的項目使用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以從map傳遞item ：

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

Answer 2

filter返回一個新數組，而不是就地修改該數組。

{...this.state.product}僅創建一個淺表副本，因此無論如何您都不應該修改product.ingredients ，這也是您第二次嘗試也失敗的原因。

嘗試這個：

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

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