react-native - Event 组件不断调用 componentDidMount 但根本不加载

Question

我的react native 0.59应用中有 3 个底部选项卡，带有react navigation 3.7. 选项卡是Event和。是初始选项卡。GroupContactEvent

初始加载后，我单击Group选项卡，屏幕如下：

显示了 2 组 HT 和 MKL。在我单击一个组（HT 或 MKL）后，这应该会加载Event组件。问题是单击组后，Event永远不会加载。在应用程序和服务器监控屏幕上，都有疯狂的加载Event和Group不停。屏幕卡住Group并停止响应任何点击。我对这种行为一无所知，因为Event模块已经过全面测试并且Group是新添加的。

这是Group模块中的 onPress 代码：

async _onPress(id) {
  try {
    console.log("saved group id in Group : ", id);
    await helper.setMyValue("group_id", id.toString());
    //update group_id in App.js
    this.props.updateGroup(id);  //<<<===this causes the problem
  } catch (err) {
    console.log("error in saving group_id to local disk", err);
  };
  this.props.navigation.goBack();
  //this.props.navigation.navigate("Event"); //, {group_id:element1.id});
}

上面的 onPress 所做的是保存id用户单击并调用updateGroup以更新父级的 group_id 并调用goBack哪个Event组件。

componentDidMount里面是Event：

async componentDidMount(){
      this._isMounted = true;

      if (!this.props.group_id) {
        alert("Select a group");
        return;
      };
      try {
        //retrieving token
        let result = this.state.token;
        if (!result) {
          result = await helper.getJwtToken();
           if (this._isMounted) this.setState({
             token: result
           });  
        };

        //console.log("secure store : ", result);
        if (!result) {
          this.props.navigation.navigate("Signup");
          return;
        };

        this.refreshData(result);

        //refresh data after goBack()
        this.willFocusSubscription = this.props.navigation.addListener(
          'willFocus', () => {
            this.refreshData(result);
          }
        );

        //get user
        let myself = this.state.user;
        if (!myself)  {
          myself = await helper._getUser(result.password, result.username);
          if (this._isMounted) this.setState({
             user: myself
           });  
        };

        console.log("out of did mount event", this.state);
      }
      catch (err) {
        console.log("服务器错误(et)，请再试一次！", err);
        this.props.navigation.navigate.goBack(); //("Event");
        return;

      };

这是在EventcomponentDidMount 中的应用程序控制台输出：

09-19 20:16:44.551 21659 21743 I ReactNativeJS: 'event url : ', 'http://192.168.2.133:3000/api/events/active?group_id=1&_group_id=1&_device_id=0cfce7b7e86fa397&_timezone=America%2FLos_Angeles'
09-19 20:16:44.552 21659 21743 I ReactNativeJS: 'out of did mount event', { activeEvents: [],

    }

更新：

问题是由this.updateGroup(id)哪个更新了group_id的状态引起的App.js

updateGroup = (group_id) => {
    if (this._isMounted) this.setState({group_id:group_id});
  };

它Group作为道具传递给App.js：

const GroupWithSelf = (props) => (<Group {...props} myself={data.myself} token={data.result} updateGroup={this.updateGroup} updateToken={this.updateToken} />);

不知道为什么这种方法会导致赛车。

标签： react-nativereact-navigation