React setState 不更新状态数组值

Question

我正在尝试使用 setState.

更改 class 组件中的 state

更具体地说，我有一个 table，我想 edit/update 它的元素之一。对于这种情况，我将索引传递给 handleTableFieldOnChange 函数以获取数组中值的位置。

因为我知道我不应该改变状态，所以我使用了一个外部库来深度复制 tables array/list。

深层复制和新的赋值有效。深层复制也适用于 JSON.parse(JSON.stringify(this.state.tables)); 替代方案。

问题： 由于某些原因，this.setState(...) 不会更改 table 的值。

我知道 setState 是异步的，这就是我使用回调并在其中 console.log(...) 检查更新值的原因。

console.log(...) 仍然发出旧值。

private handleTableFieldOnChange(val: boolean | string | number | [number, string], tblRowIndex: number, tblIndex: number, tblColINdex: number) {
        const cloneDeep = require('lodash.clonedeep');
        const newTables = cloneDeep(this.state.tables);
        if (newTables && newTables[tblIndex] && newTables[tblIndex].items ) {
            newTables[tblIndex].items![tblRowIndex][tblColINdex].value = val;
        }
        this.setState( {tables: newTables}, () => {
            console.log(this.state.tables)
        })
    }



state: State = {
  tables: [],
  report: this.props.report,
};

constructor(props: DetailProp, state: State) {
  super(props, state);                                
  this.initFieldsAndTabels();
}

 private initFieldsAndTabels() {
        if (this.state.report && this.state.report.extraction_items) {
            this.state.tables = [];
            this.state.report.extraction_items.forEach((extractionItems) => {
                    this.state.tables.push(extractionItems);
            });
        }
    }

Answer 1

handleTableFieldOnChange 中的代码对我来说很好。

然而，在 initFieldsAndTabels 中，您直接在状态上应用 push，而不是调用 setState，这可能会导致问题：

this.state.report.extraction_items.forEach((extractionItems) => {
  this.state.tables.push(extractionItems); //#HERE
});

此外，React.Component docs 声明您不应在 constructor 中调用 setState（您在 constructor 中调用 initFieldsAndTabels）。相反，您可以使用 componentDidMount.

P.S。如果你想在构造函数中添加那些提取项，那么你需要这样的东西：

  constructor(props) {
    super(props);
    // method should return a new array/object, but not modify state
    const tables = this.initFieldsAndTabels();
    this.state = {
      tables,
    }
  }

React setState 不更新状态数组值

React setState does not update a state array value

javascript

immutability

reactjs