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

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

На 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?


react-native javascript async-await ecmascript-2017
person tempomax    schedule 19.07.2017    source источник
comment
async функции возвращают промисы. await волшебным образом разворачивает это обещание. let data = this.getData(); не использует (и не может использовать) await, поэтому вы должны обрабатывать промис обычным способом. Если вы не знакомы с обещаниями, я рекомендую прочитать developer.mozilla .org/en-US/docs/Web/JavaScript/Guide/ (кстати, это не имеет ничего общего с нативным реагированием, это JavaScript).   -  person Felix Kling    schedule 19.07.2017

Ответы (3)


arrow_upward
28
arrow_downward

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

componentDidMount() {
  this.getData()
    .then((data) => {
      this.setState({
        dataSource:this.state.dataSource.cloneWithRows(data),
      })  
    });
}
person Anthony Ngene    schedule 19.07.2017

arrow_upward
7
arrow_downward

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

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

arrow_upward
0
arrow_downward

Или другой способ

  async componentDidMount() {
    const { data: dataSource = [] } = await this.getData();   
    this.setState({dataSource})  
  }

Это скопирует ваши данные в неизменяемый объект, переназначит имя, а также установит значение по умолчанию для объекта dataSource

person Cristian Canales    schedule 05.11.2019