Реагировать динамически мутирует асинхронную проблему списка состояний

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

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

Answer 2

Вы должны использовать функциональную форму 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