从子组件更新状态时检查父安装状态

Question

在我的 React Native 0.59.9 应用程序中，App class 有 2 个状态，可以由子组件更新。

class App extends React.Component {

  state = {
    group_id: this.props.navigation.state.params.data.group_id,
    result: this.props.navigation.state.params.data.result,  
  };

 updateGroup = (group_id) => {
    console.log("In updateGroup : ", group_id);
    this.setState({group_id:group_id});
  };

  updateToken = (token) => {
    console.log("In updateToken : ", token);
    this.setState({result: token});
  };

const EventWithSelf = (props) => (<Event {...props} updateToken={this.updateToken}  />)
const GroupWithSelf = (props) => (<Group {...props} updateGroup={this.updateGroup} updateToken={this.updateToken} />);   
..........
}

Event 和 Group 是可以更新 App 状态的子组件。在updateGroup和updateToken中，应用程序如何在执行setState之前检查App的安装状态？我担心的是 App 在执行 setState 时可能不会挂载。这肯定会抛出警告。

更新：

updateToken 在 Event 和 Group 中都在 componentDidMount 中。 updateGroup 由点击触发。这是代码：

async _onPress(id) {
      let element = this.state.activeGroups;
      let element1 = element.find((e) => {
        console.log("e is ", e);
        return (e.id == id);
      });
      //save group_id clicked
      try {
        console.log("saved group id in Group : ", element1.id);
        await helper.setMyValue("group_id", element1.id.toString());
      } catch (err) {
        console.log("error in saving group_id to local disk", err);
      };
      this.props.updateGroup(element1.id); //<<<=== this causes "warning of no-op with updating unmounted component" in `Event` component.
      this.props.navigation.navigate("Event", {group_id:element1.id});
      return;
    }

Answer 1

使用componentDidMount生命周期方法设置一个flag，然后将此标志传递给child组件。

定义标志isMounted:

constructor(props) {
        super(props);
        this.state = {
            isMounted: false,
        };
    }

安装组件时将 isMounted 设置为 true。

componentDidMount(){
    this.setState=({ isMounted: true })
}

并传给child人。

<Event {...props} isMounted={this.state.isMounted} updateToken={this.updateToken}  />

然后，你可以在child组件中执行setState之前使用isMounted标志检查App的安装状态。

从子组件更新状态时检查父安装状态

Check parent mounting status when updating state from a child component

reactjs

react-native

react-component

react-state