首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用useSelector redux钩子

使用useSelector redux钩子
EN

Stack Overflow用户
提问于 2019-09-21 14:03:11
回答 2查看 11.4K关注 0票数 2

我用redux创建了状态,我不知道如何导入或useSelector我想要的状态

在这里,我使用useSelector 发送到登录文件中的状态

代码语言:javascript
运行
复制
function Login(props) {

var classes = useStyles();
var dispatch = useDispatch();

const { username, password } = useSelector((state) => ({
    ...state.combineReducers,
    ...state.userReducer,
}));

这是导航文件,在这里,我想要获取状态中的内容

代码语言:javascript
运行
复制
function nav(props) {

    const { username } = useSelector((state) => ({
        ...state.combineReducers,
        ...state.userReducer,
    }));

错误

代码语言:javascript
运行
复制
 Failed to compile.

./src/NAVBAR/nav.js
  Line 27:  React Hook "useSelector" is called in function "nav" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

我试过很多方面,但都失败了。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-09-21 14:20:20

问题是nav函数,而不是函数

在您的例子中,您可能想要创建一个custom-hook

代码语言:javascript
运行
复制
function useUsername() {
  const { userName } = useSelector(state => ({
    ...state.combineReducers,
    ...state.userReducer
  }));
  return { userName };
}

function Login(props) {
  const { userName } = useUsername();
  return <>...</>;
}

注意,如果您想使它成为一个函数组件,您需要返回一个ReactElement,并在React导入的作用域内。

代码语言:javascript
运行
复制
import React from 'react';

//        v Note that you must have an Upper-case for it to be a valid ReactElement
function Nav(props) {
  const { username } = useSelector(state => ({
    ...state.combineReducers,
    ...state.userReducer
  }));

  // return ReactElement
  return <>I'm some Element</>;
}

export default Nav;
票数 5
EN

Stack Overflow用户

发布于 2020-05-29 14:08:56

我遇到了一个类似的问题,并找到了一个简单的解决办法。

代码语言:javascript
运行
复制
const username = useSelector(state => state.userReducer.username) 

因此,我们已经从还原器中获取了特定的用户名状态。我的工作是:)

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58041026

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档