React native addListeners不'；不经常工作-反应本机选项卡导航

我使用了react navigation的选项卡导航。每次按下选项卡时，我都需要调用componentDidMount中的loadData函数。所以我在其中使用addListener。但问题是显示数据的时间太长。有时它工作无缝，有时它只显示“加载数据…”所有的时间。 我是否正确使用addListener？提前谢谢

Home.js

state = {
  storageCheck: true
};

componentDidMount() {
    this._unsubscribe = this.props.navigation.addListener('willFocus', () => {
      this.loadData();
    });
}

componentWillUnmount() {
    this._unsubscribe.remove();
}

loadData = () => {
    this.setState({
        storageCheck: false
    })
}

render() {
if (this.state.storageCheck) {
  return <View>
    <Text>Loading Data...</Text>
  </View>
}
return (
    <View>
        <Text>Data</Text>
    </View>
)}

状态={
storageCheck：正确
};
componentDidMount（）{
this.\u unsubscribe=this.props.navigation.addListener（'willFocus'，（）=>{
这是loadData（）；
});
}
组件将卸载（）{
这是。_unsubscribe.remove（）；
}
加载数据=（）=>{
这是我的国家({
storageCheck:错误
})
}
render（）{
if（this.state.storageCheck）{
回来
正在加载数据。。。
}
返回(
数据
)}

选项卡导航

const TabNavigator=createBottomTabNavigator({
主页：{
屏幕：主页
},
简介：{
屏幕：配置文件，
导航选项：（{navigation}）=>({
//标题：“个人资料”，
})
},
设置：{
屏幕：设置，
}
},
{
defaultNavigationOptions:（{navigation}）=>({
tabBarIcon:（{focused，tintColor}）=>{
const{routeName}=navigation.state；
让我来；
如果（routeName==='Home'）{
iconName=‘家’；
}else if（routeName==='Profile'）{
iconName=‘账户圈’；
}else if（routeName==='Setting'）{
iconName='设置'；
}
回来
},
})
}
);
导出默认createAppContainer（TabNavigator）；

这是一个明确的解决方案。我认为您可以使用挂钩和函数组件。 我使用与此相关的解决方案

import React，{useState，useffect}来自“React”；
导入{
看法
文本
活动指示器
}从“反应本族语”；
从“@react navigation/native”导入{useIsFocused}”；
常量TestComp=（）=>{
const[storageCheck，setStorageCheck]=useState（false）；
const[isLoaded，setIsLoaded]=useState（false）；
const isFocused=useiscocused（）；
useffect（（）=>{
const loadData=async（）=>{
设置存储检查（正确）；
setIsLoaded（真）；
}
loadData（）；
}，[isFocused]）
返回(
{已加载(
一些数据或文本。。
) : (
)}
)
}
导出默认TestComp在react navigation v4中

您可以使用等待异步函数


状态={
storageCheck：对，
加载器：是的，
someData:null
};
componentDidMount（）{
this.\u unsubscribe=this.props.navigation.addListener（'willFocus'，（）=>{
这是loadData（）；
});
}
组件将卸载（）{
这是。_unsubscribe.remove（）；
}
loadData=async（）=>{
这是我的国家({
someData:wait AsyncStorage.getItem（“SOME_KEY”），
storageCheck:false，
加载器：错误
})
}
render（）{
返回(
{this.state.someData(
数据已加载
) : (
加载。。。
)}
)
}
我有一个旧项目，所以现在无法更改。我使用了react navigation v4。对于v4，您应该使用NavigationEvents组件
this.fetchData（）}{//enter page component container}
docs:我也尝试过navigationEvents。但我必须从异步存储中检索数据，这会使布局在显示真实数据之前闪烁一毫秒。所以我搬到了addListener。你试过这个吗
loadData=async（）=>{this.setState（{key:await AsyncStorage.getItem（“SOMEKEY”），loader:false}）；}
在渲染函数中：
render（）{this.state.loader？（）：（）}
tysm Eftal。。。你救了我一天。在setState中使用WAIT非常有效。请在答案中包括这一行，我将接受答案。
const TabNavigator = createBottomTabNavigator({
  Home: {
    screen: Home
  },
  Profile: {
    screen: Profile,
    navigationOptions: ({ navigation }) => ({
      // title: 'Profile',
    })
  },
  Setting: {
    screen: Setting,
  }
},
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = 'home';
        } else if (routeName === 'Profile') {
          iconName = 'account-circle';
        } else if (routeName === 'Setting') {
          iconName = 'settings';
        }

        return <MaterialIcons name={iconName} size={28} color={tintColor} />;
      },
    })
  }
);

export default createAppContainer(TabNavigator);