如何根据React Native中的异步值渲染组件

Question

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

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

这里发生的事情是我需要根据从异步返回的someValue的值渲染class1。问题是，您无法制作 render()方法async，因为异步函数返回承诺，而 render()需要返回react组件。

有人知道我该怎么做吗？

谢谢！

Answer 1

对于此类任务，您将其值放在状态中。并基于状态，您将根据需要渲染课程。

在class1的componentdidmount中，写：

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

然后在您的类中添加一种方法，该方法将基于状态值生成类：

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

以及在您的渲染方法中，类型：

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

Answer 2

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

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

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

当前，除了异步渲染问题外，由于您已经将其调用到asyncstorage.getItem（），因此我不确定使用async/等待的是什么。