javascript - 在 React 中呈现比以前呈现错误更多的钩子(Hook)

Question

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

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)

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

Answer 1

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

因为您直接在 Task 中调用函数 TaskCard，所以 TaskCard 中的 useDispatch() Hook 实际上被视为 Task 中的 Hook 调用。您必须指定 TaskCard 是组件而不是普通函数，以便 React 正确地将 useDispatch() 视为函数组件 TaskCard 中的 Hook 调用:

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