代码之家 › 专栏 › 技术社区 › Rickin Rathatha

在继续之前,react native不等待来自api的响应

native reactjs

0

Rickin Rathatha · 技术社区 · 8 年前

我刚刚开始玩react native,我有一个问题,就是函数在继续之前没有等待响应。

所以在chrome中,我的控制台日志显示:

用户存储

本州内容

从api/userstore[object object]返回数据

基本上getuserdetails是执行的,在调用api时,setdata函数运行,并且在返回api结果之前完成。

我希望在调用setdata之前完成getuserdetails函数。

我看了一下网上的资源,但不知所措。下面是我正在使用的代码(为了便于阅读nb,这一代码被删除了)。我正在使用mobx)

用户屏幕.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>)
  }
}

UsStur.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 回复 | 直到 8 年前

1

0

Jason Mullings 8 年前

如果您偶然发现了mobx的优点,那么您需要转向无状态解决方案,即:

用户屏幕.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>)
}

UsStur.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;
            }
        }

当您将数据传递到一个可观察数组中时,即@observate userdetails={};一旦promise/await完成,mobx将自动更新状态。

P.S.MOBX规则好的!!!