Невозможно установить состояние с массивом объектов

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получает требуемое значение, в то время как без асинхронного / ожидающего вывода будет выведено пустое состояние.

Поэтому, если вам нужно визуализировать данные из этого состояния, я бы предложил сделать bool 'dataLoaded' и отобразитьданные только если данные закончили загрузку.