Использование useSelector приставных крючков

Question

Я сделал состояние в редукционных хуках. Я не знаю, как импортировать или использовать. Выберите нужное состояние.

Здесь я использую useSelector Отправить в состояние в Файл входа в систему

function Login(props) {

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

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

И это файл навигации И здесь я хочу получить то, что находится всостояние

function nav(props) {

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

ошибка

 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

Я пробовал во многих отношениях, но это не удается

Answer 1

Проблема в том, что nav - это функция , а не функциональный компонент .

В вашем случае вы можете захотеть сделать custom-hook:

function useUsername() {
  const { userName } = useSelector(state => ({
    ...state.combineReducers,
    ...state.userReducer
  }));
  return { userName };
}

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

Обратите внимание, что если вы хотите сделать его функциональным компонентом, вам нужно вернуть ReactElement и находиться в области действия React import.

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;