无法使用对象数组设置状态

Question

我正在尝试在组件加载时使用对象数组设置空数组的setState。

我尝试了新的ES6语法，尝试了映射，联接等，但是无法使其正常工作。

我要插入（而不是推入）状态的阵列的控制台输出看起来正确。

mapped arrayObj : [{"word":"teacher","correct":true,"image":"/Assets/Art/Icons/teacher.png"},{"word":"backpack","correct":false,"image":"/Assets/Art/Icons/backpack.png"},{"word":"paper","correct":false,"image":"/Assets/Art/Icons/paper.jpg"}]

这是我映射对象数组的函数，然后尝试设置空答案的状态StateObj。

mapArray(){

    const arrayObj = this.state.data.answers.map(obj => obj);
    let shuffledObjArray = [{}];

    shuffledObjArray = this.shuffleArray(arrayObj)



    this.setState({
        answersObj: shuffledObjArray
    })

    return shuffledObjArray;
}

组件加载时我调用mapArray函数

componentDidMount() {
    this.mapArray();
}

Answer 1

别忘了setState是异步函数，因此状态不会立即设置。

例如，这段代码对我有用：

    async componentDidMount() {

     await this.mapArray();

    console.log(this.state)

}

obj状态获得所需的值，而没有异步/等待状态将显示空状态。

因此，如果您需要从该状态渲染数据，我建议您制作“ dataLoaded”布尔值，并仅在数据完成加载后才渲染数据。