如何基于React Native中的AsyncStorage值渲染组件？

Question

我有一个看起来像这样的组件：

export default class Class1 extends Component {
  render = async () => {
    await AsyncStorage.getItem('someValue', (error, someValue) => {
      return(
        <Class2 prop1={someValue}/>
      )
    }
  }
}

这里发生的是我需要根据从AsyncStorage返回的someValue的值来渲染Class1。问题是，你不能使render()方法异步，因为异步函数返回一个promise，而render()需要返回一个React组件。

有谁知道我怎么做到这一点？

谢谢！

Answer 1

对于这种任务，您可以将值放在您的状态中。根据状态，您将根据需要呈现类。

在Class1的componentDidMount中，写：

componentDidMount() {
    AsyncStorage.getItem('value').then((val) => {
        this.setState({ value: val });
    })
}

然后在你的Class1中添加一个方法，它将根据状态值生成类：

createClass() {
    // do something with the value
    if (this.state.value === somevalue) {
        return (
            <Class2 />
        )
    }
    return null;
}

在Class1的render方法中，键入：

render() {
    return (
        { this.createClass() }
    )
}

Answer 2

您可以将其设置为state，例如：

componentDidMount() {
  AsyncStorage.getItem('someValue', (e, someValue) => {
    this.setState({someValue})
  }
}

然后你可以在渲染中使用来自state的someValue。

目前，除了异步呈现问题之外，由于您已经将回调传递给AsyncStorage.getItem（），我不确定使用async / await会做什么。