React API fetch возвращает пустой объект

Question

У меня проблемы с получением данных из API-выборки, я предполагаю, что данные могут быть получены после console.log ()?

Как я могу это исправить?

fetch("https://www.cheapshark.com/api/1.0/games?title=batman")
      .then(response => response.json())
      .then(data => {
        console.log(data[0])
      })

Этот код сразу возвращает данные объекта

fetch("https://www.cheapshark.com/api/1.0/games?title=batman")
      .then(response => response.json())
      .then(data => {
        this.setState({api: data[0] ,loading:false})
      })
      console.log(this.state.api)

Однако мне нужно сохранить полученные данные в состоянии, но когда я вызываю его после сохранения, он возвращает пустой объект, который влияет на мне, чтобы распечатать данные в UI.

Помощь ....

Answer 1

вы пытаетесь разрешить обещание, и журнал консоли, вероятно, будет выполнен до того, как обещание вернется, попробуйте следующий код для извлечения ваших данных:

fetch("https://www.cheapshark.com/api/1.0/games?title=batman")
      .then(response => response.json())
      .then(data => {
        this.setState({api: data[0] ,loading:false},() => console.log(this.state.api))
      });

Это всегда выполняет строку журнала после настройки состояние.

Answer 2

Состояние

обновляется асинхронно. Если вы хотите увидеть обновленное состояние сразу после его обновления, передайте второй аргумент функции setState, которая является функцией обратного вызова, которая запускается после обновления состояния

this.setState({api: data[0] ,loading:false}, () => console.log(this.state))