Javascript 在React中渲染的钩子数多于上一个渲染错误

这是索引文件，它是任务卡的容器

从“./TaskCard”导入任务卡
导出函数任务（）{
const tasks=useSelector（（state）=>state.tasks）；
const dispatch=usedpatch（）；
const[task，setTask]=useState（“”）；
const[time，setTime]=useState（“”）；
函数submitTask（）{
让newTask={
id:Math.floor（Math.random（）*10000），
内容:任务,，
时间:时间,，
剩余时间：时间，
isRunning:false，
};
分派（创建（newTask））；
}
返回(
setTask（e.target.value）}/>
设置时间（e.target.value）}/>
{tasks.map（（i）=>TaskCard（i））}
);
}

这是TaskCard.js文件

从“../../hooks/useTimer”//自定义钩子导入useTimer，该钩子使用setInterval API每秒减少“time”
导出默认功能任务卡（任务）{
常数延迟=1000；
const dispatch=usedpatch（）；
使用计时器(
() => {
如果（task.remainingTime>0）{
调度（勾选（task.id））；
}else if（task.remainingTime==0）{
调度（切换运行（task.id））
}
},
task.isRunning？延迟：空
);
返回(
{task.content}

{task.remainingTime}

dispatch（remove（task.id））}>remove
调度（切换运行（task.id））}>播放/暂停
调度（重置（task.id））}>reset
);
}

代码最初呈现良好。但是在添加一个新任务时，我得到了这个错误

Warning: React has detected a change in the order of Hooks called by Task. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useContext
2. useReducer                 useReducer
3. useMemo                    useMemo
4. useRef                     useRef
5. useRef                     useRef
6. useRef                     useRef
7. useRef                     useRef
8. useLayoutEffect            useLayoutEffect
9. useLayoutEffect            useLayoutEffect
10. useDebugValue             useDebugValue
11. useContext                useContext
12. useState                  useState
13. useState                  useState
14. undefined                 useContext
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    at Task (http://localhost:3000/static/js/main.chunk.js:492:80)
    at div
    at App
    at Provider (http://localhost:3000/static/js/0.chunk.js:36550:20)
console.<computed> @ index.js:1
overrideMethod @ react_devtools_backend.js:2430
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43

react-dom.development.js:15162 Uncaught Error: Rendered more hooks than during the previous render.
    at updateWorkInProgressHook (react-dom.development.js:15162)
    at updateRef (react-dom.development.js:15694)
    at Object.useRef (react-dom.development.js:16433)
    at useRef (react.development.js:1516)
    at useTimer (useTimer.js:4)
    at TaskCard (TaskCard.js:9)
    at index.js:29
    at Array.map (<anonymous>)
    at Task (index.js:29)

警告：React检测到任务调用的挂钩顺序发生了更改。这将导致错误和错误，如果不修复。有关更多信息，请阅读挂钩规则：https://reactjs.org/link/rules-of-hooks
上一次渲染下一次渲染
------------------------------------------------------
1.useContext useContext
2.用户教育者用户教育者
3.使用备忘录使用备忘录
4.useRef useRef
5.useRef useRef
6.useRef useRef
7.useRef useRef
8.useLayoutEffect useLayoutEffect
9useLayoutEffect useLayoutEffect
10useDebugValue useDebugValue
11useContext useContext
12使用状态使用状态
13使用状态使用状态
14未定义的useContext
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
在任务中(http://localhost:3000/static/js/main.chunk.js:492:80)
在div
应用程序
在供应商处(http://localhost:3000/static/js/0.chunk.js:36550:20)
控制台@index.js:1
overrideMethod@react\u devtools\u backend.js:2430
printWarning@react dom.development.js:67
错误@react dom.development.js:43
react dom.development.js:15162未捕获错误：渲染的钩子比上一次渲染时多。
在updateWorkInProgressHook（react dom.development.js:15162）
在updateRef（react dom.development.js:15694）
在Object.useRef（react dom.development.js:16433）
在useRef（react.development.js:1516）
在useTimer（useTimer.js:4）
在任务卡上（TaskCard.js:9）
索引js:29
在Array.map（）处
at任务（index.js:29）

如何解决此问题？我应该重新构造代码吗？如果需要添加更多细节以提高清晰度，请务必让我知道。提前谢谢

{tasks.map((i) => TaskCard(i))}

由于您直接在

Task

中调用函数

TaskCard

，因此

useDispatch（）

hook-in

TaskCard

实际上被视为

Task

中的钩子调用。您必须指定

TaskCard

是组件而不是普通函数，以便React正确地将

useDispatch（）

视为函数组件

TaskCard

中的钩子调用：

{tasks.map((props) => <TaskCard {...props} />)}

{tasks.map（（props）=>）}

由于您直接在

Task

中调用函数

TaskCard

，因此

useDispatch（）

hook-in

TaskCard

实际上被视为

Task

中的钩子调用。您必须指定

TaskCard

是组件而不是普通函数，以便React正确地将

useDispatch（）

视为函数组件

TaskCard

中的钩子调用：

{tasks.map((props) => <TaskCard {...props} />)}

{tasks.map（（props）=>）}

似乎使用了一个额外的

useContext

钩子。。。请包括使用挂钩的代码。看起来像是

App

组件中的提供者。

{tasks.map（（i）=>TaskCard（i））}

应该是

{tasks.map（（i）=>）}

Ah，在这种情况下，

Task

可能会将

Task

更改为

props

，因此显然是

props

对象。似乎使用了一个额外的

useContext

钩子。。。请包括使用挂钩的代码。看起来像是

App

组件中的提供者。

{tasks.map（（i）=>TaskCard（i））}

应该是

{tasks.map（（i）=>）}

啊，在这种情况下，

Task

应该将

Task

更改为

props

，所以它显然是

props

对象。