How to update the state of React after running navigator.pop ()?

Question

While working with React Native, I have several components that click on each other, some of which change the state of the component under them, for example:

Social → Groups → Add Group

However, when I run navigator.pop() to return to the previous component (for example, after adding a group to the user account), the component under it (in this case, “Groups”) will not be updated using the last state.

What am I doing wrong here?

Answer 1

It turns out that I was able to solve this problem by inserting componentWillUpdate into the Groups component, that is, whenever the group component is updated, it runs the loadGroupsData function:

 componentWillUpdate() { this.loadGroupsData(); } 

..., in which the loadGroupsData function checks for any differences, and if present, it loads:

 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, }); } });}