时间戳

首页 > 解决方案 > 在 React 中渲染了比之前渲染错误更多的钩子

javascript - 在 React 中渲染了比之前渲染错误更多的钩子

问题描述

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


import TaskCard from './TaskCard'

export function Task() {
    const tasks = useSelector((state) => state.tasks);
    const dispatch = useDispatch();
    
    const [task,setTask] = useState("");
    const [time,setTime] = useState("");


    function submitTask() {
        let newTask = {
            id: Math.floor(Math.random() * 10000),
            content: task,
            time: time,
            remainingTime: time,
            isRunning: false,
        };
        dispatch(create(newTask));
    }

    return (
        <div>
            <input type="text" onChange={(e) => setTask(e.target.value)}/>
            <input type="number" onChange={(e) => setTime(e.target.value)}/>
            <input type="button" value="submit task" onClick={submitTask} />
            {tasks.map((i) => TaskCard(i))}
        </div>
    );
}

这是 TaskCard.js 文件。


import useTimer from '../../hooks/useTimer' // custom hook which decreases `time` per second using setInterval API 

export default function TaskCard(task) {
    const delay = 1000;
    const dispatch = useDispatch();
    useTimer(
        () => {
            if (task.remainingTime > 0) {
                dispatch(tick(task.id));
            }else if (task.remainingTime === 0) {
                dispatch(toggleIsRunning(task.id))
            }
        },
        task.isRunning ? delay : null
    );

    return (
        <div key={task.id} style={{ padding: "10px", width: "200px", margin: "20px auto", border: "orange solid 1px", borderRadius: "5px" }}>
            <p>{task.content}</p>
            <p>{task.remainingTime}</p>
            <button onClick={() => dispatch(remove(task.id))}>remove</button>
            <button onClick={() => dispatch(toggleIsRunning(task.id))}>play/pause</button>
            <button onClick={() => dispatch(reset(task.id))}>reset</button>
        </div>
    );
    
}

代码最初呈现良好。但是在添加新任务时，我收到此错误


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)

我该如何解决这个问题？我应该重组我的代码吗？如果我需要添加更多细节以提高清晰度，请告诉我。提前致谢。

标签： javascriptnode.jsreactjsreact-reduxreact-hooks

解决方案

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

因为您TaskCard直接在内部调用该函数Task，所以实际上将useDispatch()挂钩TaskCard视为内部的挂钩调用Task。您必须指定它TaskCard是组件而不是普通函数，以便 React 正确地将其useDispatch()视为函数组件中的钩子调用TaskCard：

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

推荐阅读