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() {
    return (
        { this.createClass() }
    )
}

Answer 2

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

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

然后，您可以在渲染器的状态中使用someValue。

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

如何在React Native中基于AsyncStorage值呈现组件？

2 个答案: