Question

我正在尝试使用 state 更改类组件中的 setState。

更具体地说，我有一个表格，我想编辑/更新其中的一个元素。对于这种情况，我将 indeces 传递给 handleTableFieldOnChange 函数以获取数组中值的位置。

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

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

问题：出于某种原因，this.setState(...) 不会更改表值。

我知道 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 中，您直接在 state 上应用 push 而不是调用 setState，这可能会导致问题：

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

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

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

componentDidMount

React setState 不更新状态数组值

1 个答案: