为什么 useContext 在我的函数中不起作用？

Question

我正在尝试构建一个待办事项列表应用程序，但我遇到了这个问题。我很想知道如何解决这个错误。

我已将所有功能重新排列为类组件，但这并不能解决我的错误。

List.js

import React, { createContext } from 'react';

export let ListContext = createContext();

export const Data = [
    {
        name: 'Joe',
        age: 19
    },
    {
        name: 'John',
        age: 16
    },
    {
        name: 'Claire',
        age: 17
    },
    {
        name: 'Alex',
        age: 16
    }
]

export default class List extends React.Component {

    list = () => {
        let list = Data.map(Data => <li key={Data.age}>{Data.name}</li>)
        return (
            <div>{list}</div>
        )
    }
    render() {
        return (
            <div>

                {this.list()}
            </div>
        )

    }
}

TodoForm.js

export default function Todo() {
    let inputValue = {
        value: ''
    }
    function handleChange(e) {
        inputValue.value = e.target.value;
    }
    function handleClick() {
        const value = useContext(ListContext);
    }
    return (
        <React.Fragment>
            <div>
                <input type="text" onChange={handleChange} className="inp" />
                <button onClick={handleClick} className="btn" >Add New</button>

            </div>

        </React.Fragment>
    )
}

useContext 返回此错误：./src/TodoForm.js 第 12 行：在函数“handleClick”中调用 React Hook “useContext”，该函数既不是 React 函数组件也不是自定义 React Hook 函数 react-hooks/rules-of-hooks

Answer 1

问题来了，

function handleClick() {
   const value = useContext(ListContext);
}

来自docs：

不要在循环、条件或嵌套函数中调用 Hooks。相反，请始终在 React 函数的顶层使用 Hooks。通过遵循此规则，您可以确保每次渲染组件时都以相同的顺序调用 Hook。这就是允许 React 在多个 useState 和 useEffect 调用之间正确保留 Hooks 状态的原因。 （如果您好奇，我们将在下面深入解释。）

和

从 React 函数组件调用 Hooks。从自定义 Hooks 调用 Hooks（我们将在下一页了解它们）。

useContext 是反应 Hook 并且您不能将其调用为常规函数。 React Hook 在页面加载完成时自动运行。