异步函数不执行答案

【问题标题】：async function doesn't execute异步函数不执行
【发布时间】：2019-06-25 13:39:34
【问题描述】：

retrieveData = async () => {
    try {
        //Retrieving values from AsyncStorage
        let voiture = await AsyncStorage.getItem('VOITURE')
        this.state.DBCarName=[];
        this.state.DBCarName = JSON.parse(voiture);
        alert(this.state.DBCarName)
    }
    catch {
        alert('error')
    }
}

函数的调用：

render() {
                this.retrieveData();

我想使用我的检索函数来为 DBCarName 状态分配一个值，以便在文本组件中呈现它。问题是，在 render 方法中调用函数时返回 null，这可能意味着我的函数没有执行，我的数组状态为空。

知道如何处理这个问题吗？

【问题讨论】：

没有。然后它将是error 的警报。也许您只是在VOITURE 上打错了字，或者它的默认值或任何操作都设置了 null 值。
你没有从这个函数返回任何东西......不确定问题在哪里。谁在调用这个？ stackoverflow.com/help/how-to-ask。是否会调用警报？请按照上面链接中的指南改进您的问题
你不应该直接改变this.state。有setState 方法。你不应该在render中调用涉及副作用的函数，使用相应的生命周期方法或钩子。
也就是说，如果你想在启动时获取一些数据，你可以实现 didMount() 并在那里修改你的状态。

标签： javascript reactjs react-native

【解决方案1】：

发生这种情况是因为您尝试重新分配组件的状态，而您应该改用提供的 this.setState 函数。由于您使用的是 AsyncStorage 和 this.state，我想这是一个 React Native 项目，您的代码应该如下所示：

class YourComponentName extends React.Component {
  state = {
    DBCarName: []
  }

  retrieveData = async () => {
    try {
      //Retrieving values from AsyncStorage
      const voiture = await AsyncStorage.getItem('VOITURE')
      this.setState({ DBCarName: JSON.parse(voiture) })
    } catch (err) {
        console.log(err)
    }
  }

  render () {...}
}

【讨论】：

请注意，您应该避免像 OP 那样从渲染函数调用 setState。见stackoverflow.com/questions/48226268/…
这个答案不起作用，当我打印 this.state.CarName 时我仍然得到 null
这是因为 this.setState 方法的自然异步性，你应该将 console.log(this.state.DBCarName) 作为 this.setState() 的第二个参数传递给回调，你可以找到许多示例检查 setState 的文档。另外，如果您一直为空，我还认为您在商店中的 VOITURE 密钥不存在。