从子组件更新状态时检查父安装状态 [英] Check parent mounting status when updating state from a child component

问题描述

在我的 react native 0.59.9 应用中，App 类有 2 个状态，可以由子组件更新.

In my react native 0.59.9 app, the App class has 2 states which may be updated by child components.

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 时可能不会被挂载.这肯定会抛出警告.

Event and Group are child components which may update the App's state. In both updateGroup and updateToken, how does the app checkomg the mounting state of the App before executing setState? My concern is that the App may not be mounted when setState is executed. This will certainly throw out warnings.

更新:

updateToken 位于 Event 和 Group 的 componentDidMount 中.updateGroup 由单击触发.代码如下:

The updateToken is in componentDidMount in both Event and Group. updateGroup is triggged by click. Here is the code:

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

推荐答案

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

Use componentDidMount lifecycle method to set a flag, and then pass this flag to the child components.

定义标志isMounted:

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

在组件挂载时将 isMounted 设置为 true.

Set isMounted to true when component mounts.

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

然后把它传给孩子们.

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

然后，在子组件中执行setState之前，您可以使用isMounted标志来检查App的安装状态.

Then, you can use isMounted flag to check the mounting status of the App before executing setState in the child components.

这篇关于从子组件更新状态时检查父安装状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！