Question

我有一个按钮，可将所选值提交给api。提交后，我将尝试将按钮状态设置为禁用，并在选定位置之前将选定的值恢复为原始状态。

这是我在上传句柄上所做的：

  handleStatusEditsUpload = () => {
    const { value, status } = this.state;

    this.setState({
      value: selected,
      status: {}
    });
  };

在我的真实版本中，本地状态是清除的，通过单击标题标题同时更改所有值时会使用状态，会出现一个对话框来更改该列中的所有值。

我遇到的主要问题是价值。值填充了一个新数组，该数组查看表单元格和行。

这是我的项目的演示：https://codesandbox.io/s/50pl0jy3xk

为什么状态没有改变？任何帮助一如既往。

Answer 1

正在发生的事情是您正在使用“ handleValue”方法对状态进行变异。

const newValue = [...this.state.value]; // this holds reference 
newValue[rowIdx][cellIdx] = val; // so that here your state is mutated ( and const "selected" with it)

从长远来看，您可能应该稍微更改数据结构，因此将更新合并到状态值会更容易。但是一种快速的解决方法是在更改状态值之前先克隆状态值：

handleValue = (event, val, rowIdx, cellIdx) => {
    const newValue = _.cloneDeep(this.state.value); // no reference anymore
    newValue[rowIdx][cellIdx] = val; // update the cloned value
    this.setState({
      value: newValue
    });
  };

Answer 2

我只是在您提供的沙箱中运行了您的代码，当您单击确认按钮（试图传播不可迭代的代码）时，它引发了错误。更正后，状态将正确更新。见下面我的叉子：

https://codesandbox.io/s/385y99575m

我已经留下了一些控制台日志，以便您可以在onClick触发时看到组件状态的更新。

为什么要将道具传递给handleStatusEditsUpload方法？不用争论。这只是调试过程的一部分吗？

setState不清除所选值-React

2 个答案: