代码之家  ›  专栏  ›  技术社区  ›  user938363

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

  •  0
  • user938363  · 技术社区  · 5 年前

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

    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 是可以更新 应用程序 的状态。 两者都有 updateGroup updateToken ,应用程序如何检查 应用程序 执行前 setState ?我担心的是 应用程序 在以下情况下可能无法安装 设置状态 被处决。这肯定会发出警告。

    更新:

    这个 更新token 是在 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;
        }
    
    0 回复  |  直到 5 年前
        1
  •  1
  •   user9408899    5 年前

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

    定义标志 isMounted :

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

    集合 计算错误 true 组件安装时。

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

    把它传给孩子们。

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

    那么,你可以使用 计算错误 用于检查 App 执行前 setState 在子组件中。