javascript - 在执行渲染方法之前数据不可用 - React Native

Question

我正在创建一个 React Native Android 应用程序，它从数据库中提取数据并显示它。

我想在 render() 显示变量之前运行一个 Javascript 函数。

作为

render() {
    return (
      <View><Text>{ data }</Text></View>
    );
}

不起作用，因为尚 undefined variable 。

Answer 1

您可以使用 componentDidMount 函数调用一个 api(如果您只想调用它一次)返回您可以保存在状态和渲染中的数据

class App extends React.Component {
    state = {
      data: [],
      loading: true
    }
    componentDidMount() {

       ApiCall().then((data) => {
           this.setState({data, loading: false})
       })
    }
    render() {
      if(this.state.loading) {
          return 'Loading...'
      } 
      return (
         <View><Text>{this.state.data.map((obj => <View>{/* return that you want here from obj*/}</View>))}</Text></View>
      );
    }
}

为了增强用户体验，您可以在数据准备好之前保持加载状态。