Компонент вкладки React Native не загружается после извлечения данных, пока я не нажму или не сдвину его

#javascript #reactjs #react-native #tabs #fetch

#язык JavaScript #реагирует на #реагировать-родной #вкладки #извлечь

Вопрос:

Существует полный код. Поэтому сначала я визуализирую компонент(просто означает загрузку), после этого извлекаю некоторые данные, отправляю данные в arr и использую setState(предыдущий arr в массиве) для повторной отправки компонента. И проверьте, содержит ли массив нужное слово: он показывает вкладки, а также значки с этим, но сам компонент просто серый, пока я не нажму на него или не сдвину.

 export default class FlowMeterTab extends Component{  constructor(props) {  super(props);  this.state = {  arr:[],  array:["Loading"]  }  }  getData=async ()=gt;{  await AsyncStorage.getItem('language')  .then(language =gt; {  if (language){  i18n.locale = language;  }else {  i18n.locale = 'ru';  }  });  let permissionList=await userService.getCurrentUserInfo();  permissionList.map((list)=gt;{  if (list.menuId) {  list.child.map((child) =gt; {  if (child.id === 'flowmeter_svalue') {  console.log(child)  this.state.arr.push(child.id);  }  })  }  })  console.log(this.state.arr)  this.setState({array:this.state.arr});   console.log(this.state.array)  }   async componentDidMount() {  await this.getData();  }    render() {   return (  lt;Tab.Navigator  initialRouteName='FlowMeter'  screenOptions={({route}) =gt; ({  //Для каждой страницы вместо названии в tab будет иконка  tabBarIcon: ({focused, color}) =gt; {  let iconName;   if (route.name === 'FlowMeterRate') {  iconName = 'analytics'  } else if (route.name === 'FlowMeterSpeed') {  iconName = 'speedometer-sharp'  } else if (route.name === 'FlowMeterVPlus') {  iconName = 'ios-caret-up-sharp'  } else if (route.name === 'FlowMeterVMinus') {  iconName = 'ios-caret-down-sharp'  } else if (route.name === 'FlowMeterVSum') {  iconName = 'ios-checkmark-done-sharp'  } else if (route.name === 'No data1') {  iconName = 'close-sharp'  } else if (route.name === 'No data2') {  iconName = 'close-sharp'  }   return lt;Ionicons name={iconName} size={24} color={color}/gt;;  },   tabBarStyle: {  "backgroundColor": "white"  },  tabBarShowLabel: false  })}  gt;  {this.state.array.includes("Loading")  ?  lt;Tab.Screen  name='No data1'  component={NoData}  /gt;  :  null  }  {this.state.array.includes("flowmeter_svalue")  ?  lt;Tab.Screen  name='FlowMeterRate'  component={FlowMeterRate}  options={{  tabBarLabel: i18n.t('FlowRate')  }}  /gt;  :  lt;Tab.Screen  name='No data2'  component={NoData}  /gt;  }  {this.state.array.includes("flowmeter_svalue")  ?  lt;Tab.Screen  name='FlowMeterSpeed'  component={FlowMeterSpeed}  options={{tabBarLabel: i18n.t('FlowSpeed')}}  /gt;  :null  }  {this.state.array.includes("flowmeter_svalue")  ?  lt;Tab.Screen  name='FlowMeterVPlus'  component={FlowMeterVPlus}  options={{tabBarLabel: 'V '}}  /gt;  :null  }  {this.state.array.includes("flowmeter_svalue")  ?  lt;Tab.Screen  name='FlowMeterVMinus'  component={FlowMeterVMinus}  options={{tabBarLabel: 'V-'}}  /gt;  :null  }  {this.state.array.includes("flowmeter_svalue")  ?  lt;Tab.Screen  name='FlowMeterVSum'  component={FlowMeterVSum}  options={{tabBarLabel: i18n.t('VSum')}}  /gt;  :null  }  lt;/Tab.Navigatorgt;   )  } }