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

Question

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

我想在render（）显示变量之前运行Javascript函数。

作为

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

不起作用，因为尚未定义变量。

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>
      );
    }
}

为了增强UserExperience，您可以拥有加载状态，直到数据准备就绪。