React动态地改变状态列表异步问题

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;
}