Render () вызывается до ComponentWillmount (), не удается получить данные для показа с первой попытки - PullRequest
Новая
       10

Render () вызывается до ComponentWillmount (), не удается получить данные для показа с первой попытки

0 голосов
/ 08 ноября 2018

Я хочу показать профиль пользователя в своем собственном приложении. Я получаю информацию о пользователе из другого компонента, но теперь не могу показать данные с первой попытки. Render () вызывается перед componentWillmount (), поэтому при первом нажатии на профиль данные не определяются, но когда я возвращаюсь на домашнюю страницу и нажимаю снова, я вижу информацию о пользователе. Я уже пытался установить состояние и остановить рендеринг до тех пор, пока данные не будут загружены, но не работал 

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

1 Ответ

0 голосов
/ 08 ноября 2018

Это нормальное поведение, рендер вызывается, чтобы вы могли предложить обратную связь с пользователем при загрузке чего-либо в фоновом режиме, вы должны показать пользователю что-то вроде индикатора активности , чтобы сообщить им, что ваше приложение не аварийно завершилось и извлекает данные.

В вашем методе will mount вы делаете асинхронный вызов и ожидаете ответ с «then», но вы вызываете this.setState({fetching:true}); вне возврата обещания, это означает, что он вызывается, как только выборка данных завершена. Чтобы вызвать неправильное состояние без данных, попробуйте поместить его в ваше разрешение обещания: 

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