React Native：如何根据网络响应更新视图

Question

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

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

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

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

现在，HomeScreen 具有依赖于位置状态的视图。

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

Answer 1

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

为了回答您的问题，Redux 提供了一个连接函数，它有两个参数：1) mapStateToProps 和 2) mapDispatchToProps。您可以使用这两个函数和一个名为 "componentWillReceiveProps(nextProps)".

的生命周期方法轻松解决您的问题

这里有一个例子可以参考：

Answer 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}
      ...
    );
  }
}

希望对您有所帮助！

React Native：如何根据网络响应更新视图

React Native: How to update the view which depends on nework responses

android

state

react-native

react-navigation