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

IT技术 reactjs react-native react-component react-state
2021-05-20 15:08:27

在我的 react native 0.59.9 应用程序中,App该类有 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,应用程序如何App在执行之前检查 的安装状态setState我担心的是AppsetState执行时可能不会安装这肯定会抛出警告。

更新:

updateTokencomponentDidMount在这两个EventGroupupdateGroup 由单击触发。这是代码:

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;
    }
1个回答

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

定义标志isMounted

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

组件安装时设置isMountedtrue

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

并传给孩子们。

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

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