React - 使用 setState 函数调用删除嵌套数组项答案

【问题标题】：React - remove nested array item using setState function callReact - 使用 setState 函数调用删除嵌套数组项
【发布时间】：2019-08-31 05:17:16
【问题描述】：

我正在尝试使用 setState 从数组中删除一个（半）深度嵌套项，但它似乎不起作用。我的状态结构如下：

state = {
  currentSeries: null,
  currentRowIndex: null,
  rows: [
    {
      id: shortid.generate(),
      nodes: [], 
      series: [], // array with item I want to remove
    },
  ],
};

和我的删除项目调用：

onRemoveModelElementClick = (rowId, modelElementId) => {
  this.setState((prevState) => {
    const index = prevState.rows.findIndex(x => x.id === rowId);
    const series = prevState.rows[index].series.filter(s => s.id !== modelElementId);
    return series;
  });
};

我尝试通过多种方式传播剩余状态，但它似乎无法正确更新。我 rowId 和 modelElementId 是正确的，我可以验证它们确实过滤掉了正确的项目。我只是在返回什么问题上遇到了麻烦。我知道这很简单，但对于我的生活，我看不到它。

【问题讨论】：

标签： reactjs filter setstate

【解决方案1】：

这是我为使其正常工作所做的工作，以防它可以帮助其他人：

onRemoveModelElementClick = (rowId, modelElementId) => {
  this.setState((prevState) => {
    const updatedRowState = prevState.rows.map((row) => {
      if (row.id !== rowId) {
        return row;
      }

      const filteredSeries = row.series.filter(s => s.id !== modelElementId);
      return {
        ...row,
        series: filteredSeries,
      };
    });
    return {
      rows: updatedRowState,
    };
  });
};

感谢 Dom 的伟大想法和逻辑！

【讨论】：

【解决方案2】：

我认为这里的问题是您的代码如何使用setState。 setState 函数必须返回一个对象。假设您的过滤功能与您描述的一样正确，请返回一个对象以更新状态：

return { series };

setState documentation

【讨论】：

【解决方案3】：

我的建议是使用.map 让事情更容易消化。然后你可以这样写：

onRemoveModelElementClick = (rowId, modelElementId) => {
  const updatedRowsState = this.state.rows.map(row => {
    // this is not the row you're looking for so return the original row
    if (row.id !== rowId) {
      return row;
    }

    const filteredSeries = row.series.filter(s => s.id !== modelElementId);
    return {
      // spread properties (id, node, series)
      ...row,
      // overwrite series with item filtered out
      series: filteredSeries,
    };
  });

  // since rest of the state doesn't change, we only need to update rows property
  this.setState('rows', updatedRowsState);
}

希望这会有所帮助，如果您有任何问题，请告诉我。

【讨论】：

这是个好主意。你写的东西不能开箱即用，但它让我找到了解决方案，所以我接受了。我会为我所做的工作添加一个答案。