setState Concat 仅存储/返回第一个值-- React Native答案

【问题标题】：setState Concat storing/returning only First value-- React NativesetState Concat 仅存储/返回第一个值-- React Native
【发布时间】：2018-08-17 17:34:53
【问题描述】：

在设置状态时，即使数组的长度是 9，它也只显示第一个值。我不确定哪里出了问题。

_GoTown = () => {
    if (this.state.stTownRawData == '') {
        alert(i18n.t('plsseltown'));
    }
    else {
        this.setState({ stAtmList: [] });
        var rartown = this.state.stTownRawData;
        for (i = 0; i < rartown.length; i++) {
            console.log(i);
            this.setState({ stAtmList: this.state.stAtmList.concat({ key: i, town: i18n.t('town') + rartown[i].town, address: i18n.t('add') + rartown[i].addressLine1, lat: rartown[i].latitude, long: rartown[i].longitude, icon: require('../../resources/toolbar/atm.png') }) });
        }
        console.log(rartown);
    }
}

Console.log(i) 返回从 0 到 8 的值。我不确定为什么 setState 只使用第一个值填充 stAtmList。

【问题讨论】：

标签： javascript reactjs react-native ecmascript-6

【解决方案1】：

setState 是异步的，所以即使您在第一行将值设置为 []，它也是不必在下一行中获得更新的值。

问题是，您正在循环中更新状态值，因此不能保证在下一次迭代中状态将具有更新的值。使用一个变量并将所有值压入其中，最后更新状态意味着 for 循环何时结束。

你需要这样写：

_GoTown = () => {
    if (this.state.stTownRawData == '') {
        alert(i18n.t('plsseltown'));
    }
    else {
        let stAtmList = []
        let rartown = this.state.stTownRawData;
        for (let i = 0; i < rartown.length; i++) {
            stAtmList.push({ key: i, town: i18n.t('town') + rartown[i].town, address: i18n.t('add') + rartown[i].addressLine1, lat: rartown[i].latitude, long: rartown[i].longitude, icon: require('../../resources/toolbar/atm.png') }) });
        }
        this.setState({ stAtmList });
    }
}

【讨论】：

谢谢。理解 setstate 是异步过程。工作正常。