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

Question

我正在尝试在组件加载时设置一个包含对象数组的空数组的状态。

我尝试过新的 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"}]

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

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 状态获取它需要的值，而 w/o async/await 它将打印空状态。

因此，如果您需要从该状态呈现数据，我建议将 'dataLoaded' 设置为 bool 并仅在数据加载完成后才呈现数据。

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

Unable to setState with array of objects

arrays

setstate

reactjs