react-native async 函数返回 promise 但不返回我的 json 数据？

Posted 2023-03-07

【中文标题】react-native async 函数返回 promise 但不返回我的 json 数据？

【英文标题】：react-native async function returns promise but not my json data?

【发布时间】：2017-12-25 07:48:15

【问题描述】：

我正在学习 react-native，但遇到了问题。为什么从异步函数返回数据时返回一个promise，但在异步函数本身中，它正确返回了一个对象数组？

在componentDidMount() 上，我调用我的异步函数，该函数又获取到一个 api url：

  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 对象了。为什么是这样？更重要的是，如何在componentDidMount() 中检索我的json 数据，以便将其设置为dataSource？

【问题讨论】：

async 函数返回承诺。 await 神奇地“解开”了这个承诺。 let data = this.getData(); 没有（也不能使用）await，所以你必须以“正常”的方式处理承诺。如果你对 promises 不熟悉，我推荐阅读developer.mozilla.org/en-US/docs/Web/javascript/Guide/…（顺便说一句，这与 react native 无关，就是 JavaScript）。

【参考方案1】：

或者另一种方式是

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

这会将您的数据复制到不可变对象并重新命名，同时为对象设置默认值dataSource

【参考方案2】：

由于getData() 是一个promise，您应该能够获取then 块中的数据，如下所示：

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

【参考方案3】：

与提问者原代码类似的另一种做法：

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