动态响应状态列表异步问题

Question

我对 React 很陌生，我目前正在尝试多次附加到我所在状态的列表。但是，状态似乎没有更新，我怀疑这可能是由于异步(？我将不胜感激任何指示：-(

this.state = {
data: []
};
var json = {name: "default", cost:1}
for (var i = 0; i < 3; i++) {
this.setState({ data: [...this.state.data,json] });
}

上面的代码打印了这个：

[]  
[]
[{name: "default", cost: 1}]

编辑：更多代码

componentWillMount() {
for (var i = 0; i < 3; i++) {
this.setValue(this.props.data[i]);
}
}
setValue(rowData) {
let {
checkbox: checkbox,
checked: checked,
data: data,
name: name,
headers: headers
} = this.props;
var json = {};
for (var i = 0; i < headers.length; i++) {
json[headers[i]] = rowData[i];
}
json["checked"] = checked;
this.setState(prevState => { data: [...prevState.data, json] });
{ console.log(this.getValue()) }
}

Answer 1

你应该使用this.setState()的函数形式。

this.state = {
data: []
};
var json = {name: "default", cost:1}
for (var i = 0; i < 3; i++) {
this.setState(prevState => ({ data: [...prevState.data,json] }));
}

更多信息在这里： https://reactjs.org/docs/react-component.html#setstate

Answer 2

setState(( 是异步的，因此您不能保证下次调用 setState(( 时会更新它。

我会更改您的代码以首先使用数据创建数组，然后在完成后调用 setState((。那看起来像这样：

componentWillMount() {
var data = [];
for (var i = 0; i < 3; i++) {
data.push(this.getValue(this.props.data[i]));
}
this.setState({data});
}
getValue(rowData) {
let {
checkbox: checkbox,
checked: checked,
data: data,
name: name,
headers: headers
} = this.props;
var json = {};
for (var i = 0; i < headers.length; i++) {
json[headers[i]] = rowData[i];
}
json["checked"] = checked;
return json;
}