Question

在我的本机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的安装状态？我担心的是，执行App时可能不会挂载setState。这肯定会发出警告。

更新：

updateToken和componentDidMount中的Event都在Group中。通过单击触发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，然后将此标志传递给子组件。

定义标志isMounted：

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

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

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

并将其传递给孩子们。

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

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

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

1 个答案: