为什么在 react native 上导航后数据不更新？答案

【问题标题】：Why datas not update after navigate on react native?为什么在 react native 上导航后数据不更新？
【发布时间】：2020-11-26 07:33:24
【问题描述】：

我有一个基本的标签导航 HOME-UPLOAD-PROFILE。 'HOME' 屏幕的值可以通过不同网站的 api 获取。用户登录导航系统后，将用户引导至此主页并“获取”运行良好。但是，当我使用“上传”屏幕上传内容然后返回“主页”屏幕数据时，数据未更新。而“componentDidMount”应该每次都可以工作并且每次点击“HOME”屏幕都会带来数据，但我找不到任何解决方案或答案

export default class Home extends Component {
  state = {
    data: []
  };
  async componentDidMount() {
    //Burada kullanıcı yoksa ülkeleri getireceğiz
    const rest = await fetch(
      'https://www.birdpx.com/mobile/fotografgetir/' + this.state.page,
      {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-type': 'application/json'
        },
        body: JSON.stringify(datam)
      }
    );

    const gelenVeri = await rest.text();
    let convertedVeri = JSON.parse(gelenVeri);

    this.setState({
      data: convertedVeri
    });
  }
}

【问题讨论】：

标签： react-native fetch react-navigation updates tabnavigator

【解决方案1】：

你可以通过记录来检查componentDidMount是否被触发。

componentDidMount 在 tabNavigator 的选项卡之间导航时不会被触发，除非是第一次挂载 tabNavigator。

您可以选择以下 2 种方式之一来实现您所需要的。

1.使用全局 redux 状态而不是组件状态。（推荐）

您可以在您的项目中实现redux（如果您不使用）。在Home 组件中使用 redux 状态而不是当前组件状态。

在Upload 屏幕上，上传完成后，您可以通过调度操作来更改redux 存储。这将立即反映在您的 Home 组件上。

2。获取组件焦点事件的数据

如果你想捕捉特定标签组件的焦点事件，你可以使用导航生命周期的didFocus事件监听器。

const didFocusSubscription = this.props.navigation.addListener(
  'didFocus',
  payload => {
    console.debug('didFocus', payload);
  }
);

// Remove the listener when you are done
didFocusSubscription.remove();

【讨论】：

【解决方案2】：

如果您使用 react-navigation，当您在堆栈导航器上从一个屏幕导航到下一个屏幕时，组件不会卸载。您可以在组件中监听导航生命周期事件 (https://reactnavigation.org/docs/4.x/navigation-prop/#addlistener---subscribe-to-updates-to-navigation-lifecycle)

或者，如果您使用withNavigationFocus HOC 将导航道具传递给组件，您可以使用isFocused 道具了解最近对您的组件的关注。

【讨论】：