在响应中调度后如何处理导航

时间:2019-07-25 17:42:05

标签: react-native react-navigation

我在react-navigation上遇到了麻烦,因为在将数据放入redux存储区之后,我找不到导航到屏幕的方法。我尝试做很多事情,但无济于事,问题一直存在。问题是redux存储区在弹出屏幕之前将没有足够快地调度,并且屏幕随后出错,因为json文件的某些部分不存在。我想知道是否可以暂停导航,直到使用必要的JSON文件更新商店之后。

这是我的应用中发生问题的部分。

_onPress = () => {
    if (this.state.taxonA == "" || this.state.taxonB == "") {
      Alert.alert("One or more fields have been left empty.");
      return;
    }
    let url = V.sprintf(
      "http://timetree.igem.temple.edu/api/pairwise/%s/%s",
      this.state.taxonA,
      this.state.taxonB
    );
    const { fetchData } = this.props;
    fetchData(url);
    console.log("should have fetched");
    //while(this.props.response.isFetching == true){}
    this.props.navigation.navigate("Picker");
  };

这是fetchData函数

export const fetchData = url => {
  console.log("Should enter async dispatch");
  return async dispatch => {
    dispatch(fetchingRequest());
    try{
      let response = await fetch(url);
      let json = await response.json();
      let dispatchChecker = dispatch(fetchingSuccess(json));
      console.log("DISPATCH", dispatchChecker);
      console.log("JSON",json);
      console.log(JSON.stringify(json, null, 2));
    }catch(error){
      console.log("ERROR",error);
      dispatch(fetchingFailure(error));
    }
  };
};

输出应该是从一个屏幕到另一个屏幕的过渡。但相反,应用程序将显示一条带有语句cannot read property of 'found_taxon_a' of null的红屏,其中found_taxon_a是已获取的JSON文件中的对象。

1 个答案:

答案 0 :(得分:1)

只需等待fetchData完成,然后导航到另一个屏幕:

fetchData(url)
  .then(() => this.props.navigation.navigate('Picker'))
  .catch(err => console.log('Do something'));