Реагировать на родной, не ожидая ответа от API, прежде чем продолжить - PullRequest
Новая
       7

Реагировать на родной, не ожидая ответа от API, прежде чем продолжить

0 голосов
/ 07 июня 2018

Я только что начал играть с «реактивным родным», и у меня проблема с тем, что функции не ждут ответов, прежде чем продолжить.

Итак, в Chrome мой журнал консоли отображает:

userStore

это состояние содержимого

возвращенные данные из api / userstore [объект объекта]

По существу, getUserDetails выполняется и в это время, пока вызывается API.Функция setData запускается и завершается до того, как будет возвращен результат API.

Я бы хотел, чтобы функция getUserDetails завершилась до вызова setData.

Я просматривал ресурсы в Интернете, но затрудняюсь.Код, который я использую, приведен ниже (он был сокращен для простоты чтения. Примечание. Я использую mobx)

UserScreen.js 

constructor (props) {
    super(props);
    this.state = {
        data: null
    };
}

async componentDidMount() {
  this.props.commonStore.setLoading(true);
  await this.props.userStore.getUserDetails('1');        
  this.setData();
  this.props.commonStore.setLoading(false);   
}

setData() {
    this.setState({
      userDetails: this.props.userStore.userDetails
  });
  console.log('userStore' + this.props.userStore.userDetails)
  console.log('this state contents '+ this.state.userDetails);
}

render () {
  if(this.props.commonStore.isLoading===false) {
    return (<View><Text>Ready!!</Text></View>)
  }else{}
    return (<View><Text>Loading</Text></View>)
  }
}

UserStore.js 

@action getUserDetails = (userID) => {
    axios.get('http://192.168.1.9/user/' + userID)
    .then(response => {
      console.log('returned data from api / userstore ' +response.data.user);
      this.userdetails = response.data.user;
    }).catch(error => {
      console.log(error);
      this.error = error
    })   }

Спасибо

1 Ответ

0 голосов
/ 08 июня 2018

Если вы наткнулись на красоту Mobx, вам нужно перейти к решению без сохранения состояния, а именно:

UserScreen.js 

componentDidMount() {
         this.getUserDetails();
}
async getUserDetails(){
        await this.props.UserStore.getUserDetails('1');
}
render () {
    const { isLoading, userDetails, error } = this.props.UserStore
        return (<View>
        {(!!isLoading)?<Text>{userDetails}</Text>:<Text>Loading</Text>}
        </View>)
}

UserStore.js 

@observable userdetails = {};
@observable isLoading = false;
@observable error = {};

async getUserDetails(userID) {
        this.isLoading = true;
    try {
        await axios.get('http://192.168.1.9/user/' + userID)
              .then(response => {
               console.log('returned data from api / userstore '+response.data.user);
                this.userdetails = response.data.user;
                this.isLoading = false;
               })
               .catch(error => {
                    console.log(error);
                    this.error = error
                })
     } catch (e) {
                console.log('ERROR', e);
               this.isLoading = false;
            }
        }

Когда вы передаете данные в наблюдаемый массив, т.е. @observable userdetails = {};Mobx автоматически обновит состояние, как только обещание / ожидание будет выполнено.

PS Правила Mobx в порядке !!: О)

...