Error: Invalid hook call. Hooks can only be called inside of the body of a function component. am unable to findout the solution plz help me

Question

您的 React 和渲染器版本可能不匹配（例如 React DOM）
您可能违反了 Hooks 规则
您可能在同一个应用程序中拥有多个 React 副本有关如何调试和修复此问题的提示，请参阅 https://reactjs.org/link/invalid-hook-call。

这是我的问题，我找不到解决方案

添加 TODO 文件

import React, { useState } from 'react'
import { nanoid } from '@reduxjs/toolkit'
import { useDispatch } from 'react-redux'

const AddTodo = () => {
    const dispatch = useDispatch()
    const [name, setname] = useState('')

    const handleChange = (e)=>{
            setname(e.target.value)
    }
    const handleSubmit = (e)=>{
          e.preventDefault()
          dispatch(AddTodo({id:nanoid(),todo:name,completed:false}))
    }
    return (
        <div>
            <form  >
                <input type="text" name="input" value={name}  onChange={handleChange} />
                <button onClick={handleSubmit} >Add Todo</button>
            </form>
        </div>
    )
}

export default AddTodo

添加 todo 切片文件

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

export const todoAdapter = createEntityAdapter()
export const todoSelectors = todoAdapter.getSelectors((state)=>state.todos)

const todoSlice = createSlice({
    name:'todos',
    initialState: todoAdapter.getInitialState(),
    reducers:{
        addTodo:todoAdapter.addOne,
    }
})
export const {addTodo} = todoSlice.actions

export default todoSlice.reducer;

store.js

import { configureStore } from '@reduxjs/toolkit'
import todoSlice from './todoSlice';
const store = configureStore({
  reducer: {todos:todoSlice}
})
export default store;

请有人帮助我，我找不到

请

Answer 1

在下面的代码中

 dispatch(AddTodo({id:nanoid(),todo:name,completed:false}))

AddTodo 是指您的功能组件本身。您可能打算做类似的事情：

dispatch("AddTodo", {id:nanoid(), todo:name, completed:false})

其中 "AddTodo" 是您的操作名称，{id:nanoid(), todo:name, completed:false} 是有效载荷。

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. am unable to findout the solution plz help me

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. am unable to findout the solution plz help me

reactjs

react-hooks

redux-toolkit