如何将异步存储值直接分配给状态答案

【问题标题】：How do I assign async storage value directly to state如何将异步存储值直接分配给状态
【发布时间】：2019-07-23 23:45:44
【问题描述】：

我需要类似下面的东西但我无法获得价值

state = {
  phone: async () => await AsyncStorage.getItem('phone')
}

constructor(props){
  super(props)
  alert(this.state.phone);
}

但这不起作用。

我知道如果在 componentDidMount 中调用它，然后将值传递给状态，它就可以工作但我需要类似上面的东西。

【问题讨论】：

constructor 类的函数永远不能是异步的。您在假设代码中要求的内容是不可能的。
“异步”和“直接”不能一起使用。这就像想立即喝你让你的伴侣从冰箱里拿来的啤酒。
我只需要在构造函数运行或至少在构造函数内部之前从异步存储中获取电话号码。那我该怎么办？

标签： reactjs react-native promise async-await

【解决方案1】：

这行得通：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import { AsyncStorage } from 'AsyncStorage';

class App extends Component {

  state = {};

  constructor(props) {
      super(props);
  }

  componentDidMount(){
      this.getItem().then((phone)=>{
        this.setState({
          phone
        });
      })
  }

  async getItem(){
    return await AsyncStorage.getItem('phone');
  }

  async setItem(){
    await AsyncStorage.setItem('phone','919303580');
  }

  render() {
    return (
      <div className="App">
        <p>Phone here:</p>
        {this.state.phone && <p>{this.state.phone}</p>}
        <button onClick={this.setItem.bind(this)}>Click me</button>
      </div>
    );
  }
}

export default App;

【讨论】：

谢谢你这工作，但如果我们更新构造函数内部的状态不会有问题？
我建议您使用componentDidMount()。