无效的 Hook 调用。钩子只能在函数组件的主体内部调用。为什么会抛出这个错误？

Question

这是我的 js，单击“注册”按钮时运行。我在这里提供 Dispatch 和 Navigate 挂钩。但我认为问题只出现在这堂课上

import axios from "axios";
import { useNavigate } from "react-router-dom";
import { addUser } from "./userInfoSlice";
import { useDispatch } from "react-redux";


const SubmitSignUpForm = (email,password,name) => {

const dispatch = useDispatch(); 
const navigate = useNavigate();

  axios.post("https://localhost:44336/api/signin/SignUpUser", {
    Name: name,
    Email: email,
    Password: password
  })
  .then((response) => {
    console.log(response);
    dispatch(addUser(response));
    navigate("./Browse");
  })
  .catch((reason) => {
    console.log(reason);
  });
  
  }

  export default SubmitSignUpForm;

这是我提供商店的地方。这是我的 App.js 课程。用于提供Store

  import Body from "./components/Body";


  function App() {
  return (
  <Body/>
  );
  }

  export default App;

这是我的商店。我在 App.js 中提供这个 Store。

 import { configureStore } from "@reduxjs/toolkit";
 import userInfoReducer from "../utilities/userInfoSlice"

 const appStore = configureStore({
 reducer : {
    userInfo : userInfoReducer
 }
 });

 export default appStore;

这是我的切片并将其导出到我的商店

import { createSlice } from "@reduxjs/toolkit";

const userInfoSlice = createSlice({
name : "userInfo",
initialState: [],
reducers: {
    addUser : (state, action) => {
        return  action.payload;
    },
    removeUser : (state) => {
        return null;
    }
}
});

export const  { addUser , removeUser} = userInfoSlice.actions;
export default userInfoSlice.reducer;

我收到此错误，我认为当我单击按钮时，调度会出现某种问题。有什么想法吗？

Answer 1

您正在尝试在函数内调用钩子，这在React中是不允许的。

我将您的组件修改为自定义钩子常量

SubmitSignUpForm = (email,password,name) => {

要解决您的问题，您需要创建一个自定义挂钩，该挂钩将允许您调用其他挂钩。

// Destruct props
const useSubmitForm = ({
        email,
        password,
        name
    }) => {
        // You can also have useState hooks here and expose them if you want to keep 
        // your logic clean

        // Call your hooks
        const dispatch = useDispatch();
        const navigate = useNavigate();

        const submitFormHandler = () => {
            axios.post("https://localhost:44336/api/signin/SignUpUser", {
                    Name: name,
                    Email: email,
                    Password: password
                })
                .then((response) => {
                    console.log(response);
                    // not sure where this addUser function is coming from
                    // your might have some other errors
                    dispatch(addUser(response));
                    navigate("./Browse");
                })
                .catch((reason) => {
                    console.log(reason);
                });

        }

        return {
            submitFormHandler
        }

不，当您仅在反应组件中使用它时，您可以这样做

// react component...
// assuming you have some state?
const [ firstName, setFirstName ] = useState(undefined)
const { submitFormHandler } = useSubmitForm({ name:firstName, //...others })

//Use your handler on a button 
<button onClick={submitFormHandler} > Submit </button>

Hooks 是“挂钩”到 React 生命周期的函数，因此它们只能与

useSomething

关键字一起使用，这样 React 就知道要挂钩它们