react-native асинхронная функция возвращает обещание, но не мои данные json?

Я изучаю react-native, и я сталкиваюсь с проблемой. Почему получение данных о возврате из асинхронной функции возвращает обещание, но в самой асинхронной функции он правильно возвращает массив объектов?

On componentDidMount(), Я вызываю свою асинхронную функцию, которая, в свою очередь, выполняет выборку в url api:

  componentDidMount() {
    let data = this.getData();
    console.log(data);    // <-- Promise {_40: 0, _65: 0, _55: null, _72: null}
    this.setState({
      dataSource:this.state.dataSource.cloneWithRows(data),
    })  
  }

  async getData() {
    const response = await fetch("http://10.0.2.2:3000/users", {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            }   
        }); 
    const json = await response.json();
    console.log(json);     // <-- (5) [Object, Object, Object, Object, Object]
    return json;
  }

на console.log(json), Я получаю правильный список объектов JSON, и я могу получить к ним доступ с json[0].name. Но позже, console.log(data) возвращает обещание с нечетными данные:

Promise {_40: 0, _65: 0, _55: null, _72: null}

... и я больше не могу найти свои объекты json. Почему так? Что еще более важно, как я могу получить данные json в componentDidMount() чтобы я мог установить его как dataSource?

2 ответов


С getData() это обещание, вы должны иметь возможность получить данные в then блок следующим образом:

 componentDidMount() {
    this.getData()
      .then((data) => {
        this.setState({
          dataSource:this.state.dataSource.cloneWithRows(data),
        })  
      });
  }

другой подход, аналогичный исходному коду вопрошающего:

async componentDidMount() {
    let data = await this.getData();
    console.log(data);    
    this.setState({
      dataSource:this.state.dataSource.cloneWithRows(data),
    })  
  }