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

Question

我有一个基本的选项卡导航HOME-UPLOAD-PROFILE。'HOME屏幕上有一些值，这些值是通过不同网站的api获取的。在用户登录导航系统之后，将用户引导到该主页；获取"；工作良好。但当我使用"上传"屏幕上传东西，然后返回"主页"屏幕数据时，不会更新。尽管"componentDidMount"每次都应该工作，每次点击"主页"屏幕都会带来数据，但我找不到任何解决方案或回答

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

Answer 1

您可以通过日志检查是否触发了componentDidMount。

当您在选项卡导航器中的选项卡之间导航时，componentDidMount不会被触发，除非第一次安装选项卡导航器。

您可以从以下两种方式中选择一种来实现您需要的内容。

1.使用全局冗余状态而不是组件状态。(推荐(

您可以将redux实现到您的项目中(如果您不使用(。在Home组件中使用冗余状态，而不是当前组件状态。

在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();

Answer 2

如果使用react导航，则在堆栈导航器上从一个屏幕导航到下一个屏幕时，组件不会卸载。您可以侦听组件中的导航生命周期事件(https://reactnavigation.org/docs/4.x/navigation-prop/#addlistener---订阅导航生命周期的更新(

或者，如果您使用withNavigationFocusHOC将导航道具传递给组件，则可以使用isFocused道具来了解组件最近的焦点。