reactjs - TypeError: Object(...) is not a function in React-Redux using React Final Form

Question

我正在尝试创建一个处理登录信息的商店。当我发送操作时，在控制台中它会显示一个错误。

错误

TypeError: Object(...) is not a function
    at onSubmit (Login.js:66)
    at Object.submit (final-form.es.js:1382)
    at handleSubmit (react-final-form.es.js:265)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
    at executeDispatch (react-dom.development.js:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
    at processDispatchQueue (react-dom.development.js:8288)
    at dispatchEventsForPlugins (react-dom.development.js:8299)
    at react-dom.development.js:8508
    at batchedEventUpdates$1 (react-dom.development.js:22396)
    at batchedEventUpdates (react-dom.development.js:3745)
    at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
    at attemptToDispatchEvent (react-dom.development.js:6005)
    at dispatchEvent (react-dom.development.js:5924)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at discreteUpdates$1 (react-dom.development.js:22413)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)

这是代码：

店铺

import {configureStore} from '@reduxjs/toolkit'
import loginReducer from "./slices/loginSlicer"


const store = configureStore({
reducer: {
    login: loginReducer
}
})

export default store;

这是我的：

登录切片器

import {createSlice} from "@reduxjs/toolkit"

const initialState = {
    isLoading: false,
    isAuth:false,
    error:''
};

const loginSlice = createSlice({
    name:'login',
    initialState,
    reducer:{
        loginPending:(state) =>{
            state.isLoading = true;
        },
        loginSuccess:(state) =>{
            state.isLoading = false;
            state.isAuth  = true;
            state.error= " ";
        },
        loginFailed:(state,{payload}) =>{
            state.isLoading = false;
            state.error = payload;
        }
    }
});

const {reducer,actions} = loginSlice;

export const {loginPending,loginSuccess,loginFailed} = actions;

export default reducer;

这里是我的 Login.js

import React, { useState,useEffect } from "react";
import { Form } from "react-final-form";
import { TextField, showErrorOnBlur } from "mui-rff";
import {useDispatch} from "react-redux"

import {loginPending,loginSuccess,loginFailed} from "../slices/loginSlicer"

export default function Login({history}) {
  const dispatch = useDispatch();

const onSubmit = async (values) => {
    
      try {
        dispatch(loginPending());
      } catch (error) {
        console.log(error);
      }
}

请帮我解决这个问题，我是新手，遇到这个问题。我尝试了多种方法，但没有任何效果。

标签： reactjsnpmreact-reduxreact-routerreact-hooks

Answer 1

我刚刚删除了 node_modules 并再次重新安装了所有依赖项。重新启动，服务器，一切正常。