React Native：如何更新取决于网络响应的视图答案

【问题标题】：React Native: How to update the view which depends on nework responsesReact Native：如何更新取决于网络响应的视图
【发布时间】：2017-12-28 06:56:27
【问题描述】：

假设我有两个屏幕：HomeScreen 和 LocationScreen

步骤：首先我从 HomeScreen(state={location: 'A'}) 导航到 LocationScreen。

LocationScreen 中的位置已更改（state={location: 'B'}）

将其传递到 HomeScreen 并将位置从 A 更改为 B。

现在，HomeScreen 的 View 取决于位置状态。

所以我的问题是，如何在位置更新后更新主屏幕的视图内容，因为内容来自网络响应？

【问题讨论】：

标签： android react-native state react-navigation

【解决方案1】：

您遇到的问题是 React 中状态管理的常见问题。为了减轻您的麻烦，还有另一个名为 Redux 的库。读一读。

为了回答你的问题，Redux 提供了一个连接函数，它有两个参数：1) mapStateToProps & 2) mapDispatchToProps。您可以使用这两个函数和一个名为“componentWillReceiveProps(nextProps)”的生命周期方法轻松解决您的问题。

这是一个你可以参考的例子：https://stackoverflow.com/a/38203735/2164029

【讨论】：

感谢您的回复，但是由于位置更新后内容来自网络响应，如何帮助我更新主屏幕的视图内容？
那么您可能应该在请求网络响应时启动一个活动指示器，并在收到响应后立即停止它。然后您可以使用状态变量更新视图。
Redux 是一本不错的读物。当组件状态发生变化时，React Native 会自动重新更新（更新意味着重新加载整个组件）组件吗？
是的，确实如此。这就是美。此外，它只会更改受该状态变量影响的组件部分。

【解决方案2】：

Redux 是一款出色的应用状态管理工具，尤其是对于在应用中的几个地方共享的状态。

不过，在您的用例中，我认为常规的 React 状态就足够了。

在您将更改的位置从Location 屏幕传回Home 屏幕后，Home 屏幕可以触发数据获取。通过将内容存储在组件状态中，您可以轻松地在渲染函数中引用它们。 this.setState 触发组件的重新渲染，因为任何state 更改或prop 更改都会导致重新渲染

例如

class HomeScreen extends Component {
  ...
  onLocationChange(newLocation) {
    this.setState({ loading: true, newLocation }); // Loading data, and storing new location
    fetchDataBasedOnLocation().then((data) => {
      this.setState({ content: data. loading: false });
    });
  }

  render() {
    return (
      ...
      {Your content in this.state.content}
      ...
    );
  }
}

希望对您有所帮助！

【讨论】：