react：React Hook "useSelector" cannot be called at the top level.

 

 翻译过来的意思是：React Hook “useSelector” 不能在顶层调用。

调用useSelector这个hook需要放在函数组件内部

原代码

const collapsed = useSelector((state: RootState) => state.app.collapsed)
const dispatch = useDispatch()  //派发动作的函数
const handelChangeCol = (bol: boolean) => {
    dispatch(setCollapsed(bol))
}


const Layouts: FC = () => {
    // const [collapsed, setCollapsed] = useState(false);
    return (
        <Layout id="basic-layout">
            <BaseAsider collapsed={collapsed}></BaseAsider>
            <Layout className="site-layout">
                <BaseHeader collapsed={collapsed} setCollapsed={handelChangeCol}></BaseHeader>
                <BaseContect></BaseContect>
            </Layout>
        </Layout>
    );
}

　修改后

const Layouts: FC = () => {
    // const [collapsed, setCollapsed] = useState(false);
    const collapsed = useSelector((state: RootState) => state.app.collapsed)
    const dispatch = useDispatch()  //派发动作的函数
    const handelChangeCol = (bol: boolean) => {
        dispatch(setCollapsed(bol))
    }
    return (
        <Layout id="basic-layout">
            <BaseAsider collapsed={collapsed}></BaseAsider>
            <Layout className="site-layout">
                <BaseHeader collapsed={collapsed} setCollapsed={handelChangeCol}></BaseHeader>
                <BaseContect></BaseContect>
            </Layout>
        </Layout>
    );
}