Question

我想在我的本机应用程序中显示用户个人资料。我从另一个组件获取了用户信息，但是现在我无法在第一次尝试时显示数据。 Render（）在componentWillmount（）之前调用，因此，第一次单击配置文件时，数据是不确定的，但是当我返回主页并再次单击时，会看到userinfo。我已经尝试设置状态并停止渲染，直到加载数据但没有用

 var data = [];
    class Profiel extends Component {

      constructor(props) {
         super(props)
    this.state={fetching:false};

      }

       componentWillMount() {

        SInfo.getItem("userdata",{}).then( JsonData => {
            data = JSON.parse(JsonData)
          console.log(data.nickname)   //Show secon
        });
        this.setState({fetching:true});

               }

      render() {
        console.log('render ' + data.nickname)  //shows first

        if(!this.state.fetching){
          return null;
        }
        return (

          <Text>{data.nickname}</Text>
          <Text>{data.email}</Text>
          <Text>{data.age}</Text>
)
}

Answer 1

这是正常行为，调用了render，因此您可以在后台加载内容时向用户提供反馈，您应该向用户展示activity indicator之类的内容，以使他们知道您的应用尚未崩溃并正在获取数据。

在您的will mount方法中，您将进行异步调用并等待带有“ then”的响应，但是您在Promise返回值之外调用.gitlab-ci.yml，这意味着一旦数据被调用调用fetch时，它会在没有数据的情况下呈现错误的状态，请尝试将其放入您的promise解析中：

this.setState({fetching:true});

在ComponentWillmount（）之前调用Render（），第一次尝试时无法获取显示数据

1 个答案: