运行 navigator.pop() 后如何刷新 React 状态？

Posted 2023-03-15

【中文标题】运行 navigator.pop() 后如何刷新 React 状态？

【英文标题】：How do I refresh React state after running navigator.pop()?

【发布时间】：2016-03-04 04:00:48

【问题描述】：

在使用 React Native 时，我有一些组件相互叠加，其中一些会改变它们下方组件的状态，如下所示：

社交 -> 群组 -> 添加群组

但是，当我运行 navigator.pop() 以返回到上一个组件时（例如，将组添加到用户帐户后），下面的组件（在本例中为“组”）不会刷新最新状态。

我在这里做错了什么？

【问题讨论】：

我认为这与导航器无关。您需要更改顶部组件的状态，将触发重新渲染。

【参考方案1】：

原来我可以通过在“Groups”组件上插入componentWillUpdate 来解决这个问题，也就是说，每当 Groups 组件更新时，它都会触发 loadGroupsData 函数：

componentWillUpdate() 
  this.loadGroupsData();

...loadGroupsData 函数检查任何差异，如果存在差异，则加载：

loadGroupsData() 
api.getUserGroups(this.state.userId, (data) => 
  data.forEach((group, index) => 
    group.groupname = group.groupname;
  );
  if (this.state.dataSource._cachedRowCount === undefined || this.state.dataSource._cachedRowCount !== data.length) 
    this.setState(
      usersGroups: data.map(data => data.groupname),
      dataSource: this.state.dataSource.cloneWithRows(data),
      loaded: true,
    );
  
); 

【讨论】：

我认为你不能在 componentWillUpdate 函数中设置状态。反应本机文档说。注意：您不能在此方法中使用 this.setState()。如果您需要更新状态以响应道具更改，请改用 componentWillReceiveProps。 facebook.github.io/react/docs/component-specs.html

如果我将 setState 放在 componentWillUpdate 上，会收到无休止的调用，知道如何防止这种情况发生吗？