Блог

таков сценарий:

В Главном маршруте есть выпадающее меню, которое содержит подсистемы, и в зависимости от каждой подсистемы пункты меню различаются. Поэтому, когда я изменяю подсистему, пункты меню ящика должны обновляться. Я реализовал свой ящик, чтобы получать динамические элементы, такие как приведенный ниже код. Но проблема в том, что когда затем загружаются подсистемы, я иду за пунктами меню, после чего я обновляю состояние menuData, весь компонент перекомпилируется, и он попадает в цикл. Как Я Могу Преодолеть Эту Проблему ?

MY CODE StackNavigationManager.js

 import {AuthContext} from './context';  const StackNavigationManager = () => { const [menuData, setMenuData] = React.useState([]);  const authContext = React.useMemo(() => ({ validateMenuData: menuData => {  setMenuData(menuData);  },  }));  const DrawerScreen = ({route, navigation}) => (  <Drawer.Navigator  drawerContent={props => <CustomDrawerContent {...props} />}>  <Drawer.Screen  name="HomeDrawer"  component={Home} />  </Drawer.Navigator>  );  function CustomDrawerContent(props) {  return (  <SafeAreaView style={{flex: 1}}>  <DrawerItemList {...props} />  <FlatList  data={menuData}  keyExtractor={data => data.id.toString()}  renderItem={({item}) => {  return (  <DrawerItem  label={item.name}  onPress={() => alert(item.id)}></DrawerItem>  );  }}  />  </SafeAreaView>  );  }  return (<AuthContext.Provider value={authContext}>  <NavigationContainer>  <Stack.Navigator  initialRouteName={initialRoute}>    <Stack.Screen  name="Home"  component={DrawerScreen}  options={{  headerShown: false,  }}  />  </Stack.Navigator>  </NavigationContainer>  </AuthContext.Provider>);  

Context.js

 import React from 'react';  export const AuthContext = React.createContext();  

Home.js

 import {AuthContext} from './context';  const home = ({navigation}) => {  const {validateMenuData} = React.useContext(AuthContext);  React.useEffect(() => {  console.log('MOUNTED EFFECT');  getSubSystems();   return () => {  isMounted = false;  console.log('UNMOUNTED EFFECT');  };  }, []);  const getSubSystems = async () => {  const subSystemModel = {  isActive: true,  isVisible: true,  };  fetchSubSystemData(  subSystemModel,  response => {  if (response.list !== null) {  let listData = [...response.list];    fetchMenuAction(  listData[0].id,  response2 => {  validateMenuData([...response2.list]);  },  );  }  },  () => {},  );  };