Reactjs 错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。我找不到解决方案，请帮助我 React和渲染器的版本可能不匹配（例如React DOM） 你可能违反了钩子的规则 同一应用程序中可能有多个React副本 有关如何调试和修复此问题的提示，请参阅

这是我的问题，我找不到解决办法

添加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

store.js

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

请有人帮帮我我找不到

请输入以下代码

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

AddTodo

指的是功能组件本身。 你可能想做一些事情，比如：

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

---

其中，

“AddTodo”

是操作的名称，

{id:nanoid（），todo:name，completed:false}

是有效负载。

错误在哪个文件中？你能在你的问题中也包括错误的快照吗？

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