[英]React setState does not update a state array value
I am trying to change the state
in a class component by using setState
.我正在尝试使用
setState
更改state
组件中的 state 。
More specific I have a table, and I want to edit/update one of its elements.更具体地说,我有一张桌子,我想编辑/更新它的一个元素。 For this case, I am passing the indeces to the
handleTableFieldOnChange
function for the position of the value in the array.对于这种情况,我将数组中值的 position 的索引传递给
handleTableFieldOnChange
function。
Since I know that I should not mutate the state, I used an external library to deep copy the tables array/list.因为我知道我不应该改变 state,所以我使用了一个外部库来深度复制表数组/列表。
The deep copy and the new value assignment works.深拷贝和新的赋值有效。 The deep copy worked also with the
JSON.parse(JSON.stringify(this.state.tables));
深拷贝也适用于
JSON.parse(JSON.stringify(this.state.tables));
alternative.选择。
Problem: For some reason the this.setState(...)
does not change the tables value.问题:由于某种原因
this.setState(...)
不会改变表的值。
I do know the setState
is asynchronous, this is why I used the callback and within it, the console.log(...)
to check the updated value.我确实知道
setState
是异步的,这就是我使用回调并在其中使用console.log(...)
来检查更新值的原因。
console.log(...)
still emits the old value. 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);
});
}
}
The code in handleTableFieldOnChange
looks fine to me. handleTableFieldOnChange
中的代码对我来说看起来不错。
However in initFieldsAndTabels
you are applying push
on state directly instead of calling setState
which may probably cause the issues:但是,在
initFieldsAndTabels
中,您直接在 state 上应用push
,而不是调用可能导致问题的setState
:
this.state.report.extraction_items.forEach((extractionItems) => {
this.state.tables.push(extractionItems); //#HERE
});
Also as React.Component docs state you should not call setState
in constructor
(you are calling initFieldsAndTabels
in constructor
. Instead you could use componentDidMount
.同样作为React.Component docs state 你不应该在构造函数中调用
setState
(你在constructor
constructor
调用initFieldsAndTabels
。相反你可以使用componentDidMount
。
PS If you want to add those extraction items in the constructor then you need something like this: PS如果你想在构造函数中添加那些提取项,那么你需要这样的东西:
constructor(props) {
super(props);
// method should return a new array/object, but not modify state
const tables = this.initFieldsAndTabels();
this.state = {
tables,
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.