React Todo应用useContext钩子调用无效问题求助

问题根源 #

你遇到的无效钩子调用错误，核心原因是违反了React钩子规则：在普通函数deleteTask中调用了useContext钩子。React要求钩子只能在函数组件的主体顶层或自定义钩子的顶层调用，不能在普通函数、循环、条件判断或嵌套函数内使用。

另外，你的App组件中TodoStore.Provider传递的value是setTodoList（单个函数），但原代码里尝试解构{setList}，这会导致解构失败，也是需要修正的点。

修复方案 #

方案一：将deleteTask改为自定义钩子（推荐） #

自定义钩子命名必须以use开头，符合React钩子规范，可以合法调用其他钩子：

修改deleteTask为自定义钩子useDeleteTask：

import { useContext } from "react"
import TodoStore from "../Hooks/TodoStore"

const useDeleteTask = () => {
  // 在自定义钩子顶层调用useContext，符合规则
  const setList = useContext(TodoStore);

  const deleteTask = (id, alltasks) => {
    const result = alltasks.filter(item => item.id !== id);
    setList([...result]);
  };

  return deleteTask;
}

export default useDeleteTask;

修改Tasks组件使用该钩子：

import React from 'react'
import Completed from '../Operations/Completed'
import useDeleteTask from '../Operations/useDeleteTask'

function Tasks(props) {
  // 在组件顶层调用自定义钩子
  const deleteTask = useDeleteTask();

  return (
    <div>
      {props.alltasks.map(item => (
        <div key={item.id}>
          <span onClick={() => Completed(item.id, props.alltasks)}>{item.text}</span>
          <button onClick={() => deleteTask(item.id, props.alltasks)}>X</button>
        </div>
      ))}
    </div>
  )
}

export default Tasks

同时修正App组件的Provider传递值为对象（匹配钩子中的解构逻辑）：

// App组件中修改Provider部分
<TodoStore.Provider value={{ setList: setTodoList }}>
  <TodosForm fillTodoList={fillTodoList} />
  <Tasks alltasks={todolist} setList={setTodoList}/>
</TodoStore.Provider>

方案二：直接从组件传递setList参数 #

如果不想用自定义钩子，可以把setList作为参数传递给普通函数deleteTask，避免在函数内调用钩子：

修改deleteTask为普通函数：

const deleteTask = (id, alltasks, setList) => {
  const result = alltasks.filter(item => item.id !== id);
  setList([...result]);
}

export default deleteTask;

修改Tasks组件调用时传递setList：

import React from 'react'
import Completed from '../Operations/Completed'
import deleteTask from '../Operations/deleteTask'

function Tasks(props) {
  return (
    <div>
      {props.alltasks.map(item => (
        <div key={item.id}>
          <span onClick={() => Completed(item.id, props.alltasks)}>{item.text}</span>
          <button onClick={() => deleteTask(item.id, props.alltasks, props.setList)}>X</button>
        </div>
      ))}
    </div>
  )
}

export default Tasks

这个方案不需要修改App组件的Provider，因为直接通过props传递了setList。

内容的提问来源于stack exchange，提问作者عبدالرحمن محمد