React开发遇Invalid hook call报错，附Redux Toolkit Todo代码无法定位问题求助

项目运行时触发报错 Invalid hook call. Hooks can only be called inside of the body of a function component，经多轮排查未定位到问题根源，可对照官方给出的三类通用排查方向逐一定位问题。

官方通用排查方向 #

• 项目内React与对应渲染层（如React DOM）存在版本不匹配问题
• 代码编写违反React Hook的使用规则
• 同一应用中存在多份React副本

可结合官方文档公开的调试、修复技巧开展定位操作

项目涉及的现有代码 #

AddTodo组件实现 #

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配置 #

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

问题定位与修复指引 #

• 代码层面的显性问题：AddTodo组件内没有导入切片导出的addTodo action创建函数，提交逻辑错误把组件本身AddTodo作为action传递给dispatch，本身存在逻辑缺陷；若组件未被react-redux的Provider组件包裹，useDispatch Hook会因为找不到上层store上下文，直接触发无效Hook调用报错。
• 依赖层面的核查项：逐一核对react、react-dom、react-redux、@reduxjs/toolkit的版本号，确认各版本在官方兼容区间内，避免React与渲染层版本错位触发报错。
• 构建层面的核查项：检查打包产物，确认是否存在重复打包的React副本，可通过在打包配置中设置React别名指向单一依赖路径，解决多副本引发的Hook上下文不一致问题。
• 针对性修复示例：
  1. 在AddTodo组件中补充导入逻辑，修正dispatch传参：

     // 补充导入切片导出的addTodo action
     import { addTodo } from './todoSlice'
     // 修正提交逻辑
     const handleSubmit = (e)=>{
       e.preventDefault()
       dispatch(addTodo({id:nanoid(),todo:name,completed:false}))
     }
     

  2. 全局入口处补充Provider包裹逻辑，确保Hook可正常获取store上下文：

     import { Provider } from 'react-redux'
     import store from './store'
     // 根组件渲染逻辑
     <Provider store={store}>
       <App />
     </Provider>
     

内容的提问来源于stack exchange，提问作者user12381629