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

Leart Morina

我正在尝试构建待办事项列表应用程序，但我一直陷在这个问题中。我非常有兴趣了解如何解决此错误。

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

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

ravibagul91

问题在这里

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

从文档：

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

和