1

在我的 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？我担心的是执行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;
    }
4

1 回答 1

1

使用componentDidMount生命周期方法设置 a 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}  />

然后，您可以使用isMountedflag 来检查子组件中App执行之前的挂载状态。setState

于 2019-08-28T05:01:04.487 回答