尝试在自定义侧边栏上显示用户名，它给了我下面的错误消息

Posted 2023-02-22

【中文标题】尝试在自定义侧边栏上显示用户名，它给了我下面的错误消息

【英文标题】：try to display username on custom sidebar and it's giving me the error message below

【发布时间】：2021-08-16 18:43:27

【问题描述】：

**错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用。这可能是由于以下原因之一：

你可能有不匹配的 React 版本和渲染器（例如 React DOM）

你可能违反了钩子规则

您可能在同一个应用中拥有多个 React 副本**

从 'react' 导入 React,useState,useEffect;

              import  useDispatch  from 'react-redux';
         import  selectUser,logout  from '../../features/userSlice';


  const CustomSidebarMenu  = (props) => 
       const user = useSelector(selectUser);
       return (
         <View style=stylesSidebar.sideMenuContainer>
           <View style=stylesSidebar.profileHeader>

             <View style=stylesSidebar.profileHeaderPicCircle>
               <Text style=fontSize: 25, color: '#307ecc'>
               'MANS React'.charAt(0)
               </Text>
             </View>

             <Text style=stylesSidebar.profileHeaderText>
         user.Username
             </Text>
           </View>


           <View style=stylesSidebar.profileHeaderLine />

           <DrawerContentScrollView ...props>
             <DrawerItemList ...props />

             <Divider style= backgroundColor: '#000', marginVertical:20,borderWidth:2,borderColor: '#000' />



             <DrawerItem
               icon=(color,size) => (
                 <Icon
                 name="exit-to-app"
                 color=color
                 size=size
                 />
             )
             label="Logout"
               onPress=() => 
                 props.navigation.toggleDrawer();
                 Alert.alert(
                   'Logout',
                   'Are you sure? You want to logout?',
                   [
                     
                       text: 'Cancel',
                       onPress: () => 
                         return null;
                       ,
                     ,
                     
                       text: 'Confirm',
                       onPress: () => 
                         AsyncStorage.clear();
                             // dispatch(logout());
                         props.navigation.replace('Auth');
                       ,
                       // onPress : handleLogout()
                     ,
                   ],
                   cancelable: false,
                 );
               
             />
           </DrawerContentScrollView>
         </View>

         // </Provider>
       );
     ;

【问题讨论】：

你能粘贴完整的代码吗？

错误是说你的问题是 hooks 。但我没有看到您共享的代码中使用了任何钩子。

请立即检查代码@Shyam

这是什么selectUser ？你也可以添加那个代码吗？

选择用户来自某个州

【参考方案1】：

问题在于 useSelector 函数。 useSelector 函数接受一个函数作为参数，并允许我们从存储中读取特定的状态。

假设您有具有以下结构的商店

  user: 'fmans'

要阅读它，您需要将 useSelector 编写为

const user = useSelector(state => state.user);