reactjs Redux工具包调度对象时出错错误:缩小还原错误#7

ctzwtxfj  于 2022-11-22  发布在  React
关注(0)|答案(1)|浏览(147)

有人知道为什么会出现这个错误吗?我认为这与thunk中间件有关,我正在使用redux工具包中的configureStore,我只是试图从Axios响应中调度对象数据数组
为什么我总是得到这个错误?我需要添加thunk中间件吗?

这是错误x1c 0d1x
索引.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';

import { configureStore } from '@reduxjs/toolkit';
import App from './App';
import './index.css'

// slices
import Register from './features/registerSlice'
import loginSlice from './features/loginSlice';
import ForgotSlice from './features/forgot';
import handlePage from './features/heroPage';
import  NewTask  from './features/newTaskSlice';
import taskList from './features/taskList';

export const store = configureStore({
  reducer: {
    Register: Register,
    Login: loginSlice,
    Forgot: ForgotSlice,
    handlePage: handlePage,
    NewTask: NewTask,
    TaskList: taskList
  },
  
  middleware: (getDefaultMiddleware) =>
  getDefaultMiddleware({
    serializableCheck: false,
    thunk: true
  }),
})

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <Provider store={store}>
      <App />

    </Provider>
  </BrowserRouter>
);

Private Route//第34行出错,在setList上分派

import React, { useState } from 'react'
import { AnimatePresence } from 'framer-motion'
import { useNavigate } from 'react-router-dom'
import Axios from 'axios'

// COMPONENTS
import Loader from './loader/Loader'
import Hero from './main/hero'
import { useDispatch } from 'react-redux'
import { setList, setFinished } from '../features/taskList'

export const PrivateHome = () => {
    Axios.defaults.withCredentials = true

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

    const [loggedIn, setLog] = useState(false)
    const [finished, setFinished] = useState(0)
    const [active, setActive] = useState(0)

    Axios.get(`${process.env.REACT_APP_BASEURL}/login`).then((response) => {
        console.log("TEST LOGIN")
        console.log(response)
        if (response.data?.loggedIn) {

            Axios.get(`${process.env.REACT_APP_BASEURL}/tasks`).then((response) => {
                const data = response.data?.userData
                setActive(data?.activeTask?.length)
                setFinished(data?.finishedTask?.length)
          
                // PUT LIST OF DATA INTO REDUX STATE
                dispatch(setList({ value: data?.activeTask })) // ERROR HERE
                dispatch(setFinished({ value: data?.finishedTask })) // ERROR HERE

                console.log(data)

                setLog(true)

              })

        } else {
            setLog(false)

            navigate("/", { replace: true })

        }
    })

    if (!loggedIn) {
        return (
            <AnimatePresence>
                <Loader/>
            </AnimatePresence>
        )
    }

    return (
        <Hero finished={finished} active={active}/>
    )
}

相关问题