Question

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

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

添加待办事项文件

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

添加待办事项切片文件

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} 是有效负载。

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。我无法找到解决方案请帮助我

1 个答案: