Question

我刚刚开始玩反应本机，我有一个问题，功能不等待响应继续。

因此，在Chrome中我的控制台日志显示：

userStore

此州内容

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

基本上执行getUserDetails并且在调用api时的那个时间运行setData函数，并且在返回api结果之前完成。

我想在调用setData之前完成getUserDetails functio。

我在网上看了一下资源，但我很茫然。我正在使用的代码如下（为了便于阅读，我已经删除了这个代码。我正在使用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
    })   }

由于

Answer 1

如果你偶然发现了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 = {};一旦promise / await完成，Mobx将自动更新状态。

P.S。 Mobx规则OK !! ：O）

在继续之前，React本机不等待API的响应

1 个答案: