我想只显示给一个用户，但得到这个错误:

Question

无效钩子调用。钩子只能在函数组件的内部调用。这可能是由于以下原因之一:

你可能有不匹配版本的React和渲染器(如React DOM)你可能违反了胡克斯规则你可能在同一个应用程序中有多个React副本，请参阅如何调试和修复此问题的提示。

navconfig.js

import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
// component
import Iconify from '../../components/Iconify';

// ----------------------------------------------------------------------

const getIcon = (name) => <Iconify icon={name} width={22} height={22} />;

//get data from signup page
const [state, setState] = useState({
email: '',
password: '',
});

const { email, password } = state;

const { currentUser } = useSelector((state) => state.user);
// console.log('currentuser', JSON.parse(currentUser).email)

useEffect(() => {

const email = currentUser  ? JSON.parse(currentUser).email : null; 
if (email == "[e-mail]") {
const navConfig = [
{
title: 'dashboard',
path: '/dashboard/app',
icon: getIcon('eva:pie-chart-2-fill'),
},
{
title: 'user',
path: '/dashboard/user',
icon: getIcon('eva:people-fill'),
},
{
title: 'product',
path: '/dashboard/products',
icon: getIcon('eva:shopping-bag-fill'),
},
{
title: 'blog',
path: '/dashboard/blog',
icon: getIcon('eva:file-text-fill'),
},
{
title: 'calender',
path: '/dashboard/calender',
icon: getIcon('uis:calender'),
},
{
title: 'login',
path: '/login',
icon: getIcon('eva:lock-fill'),
},
{
title: 'register',
path: '/register',
icon: getIcon('eva:person-add-fill'),
},
{
title: 'Not found',
path: '/404',
icon: getIcon('eva:alert-triangle-fill'),
},
];
}else
{
const navConfig = [

{
title: 'user',
path: '/dashboard/user',
icon: getIcon('eva:people-fill'),
},
{
title: 'product',
path: '/dashboard/products',
icon: getIcon('eva:shopping-bag-fill'),
},
{
title: 'blog',
path: '/dashboard/blog',
icon: getIcon('eva:file-text-fill'),
},
{
title: 'calender',
path: '/dashboard/calender',
icon: getIcon('uis:calender'),
},
{
title: 'login',
path: '/login',
icon: getIcon('eva:lock-fill'),
},
{
title: 'register',
path: '/register',
icon: getIcon('eva:person-add-fill'),
},
{
title: 'Not found',
path: '/404',
icon: getIcon('eva:alert-triangle-fill'),
},
];
}
}, [currentUser]);




export default navConfig;

Answer 1

我认为你不应该在组件之外使用hook。您可以在这里阅读更多内容:https://en.reactjs.org/warnings/invalid-hook-call-warning.html

Answer 2

不要在组件外使用钩子，我们可以知道钩子是以'use'开始的，例如:useState, useeffect。钩子只能在组件中使用，组件就像

const ThisIsAComponent = () => {return(<div>something you want</div>)}

所以如果你想使用钩子你必须这样做

const ThisIsAComponent = () => {                                    
const [value, setvalue]=useState()    


return(<div>something you want</div>)}

如果你像这样使用钩子

const [value, setvalue]=useState()//this hook obviously outside of component                                  
const ThisIsAComponent = () => {                                    


return(<div>something you want</div>)} 
            

它会抛出你得到的错误