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

问题在这里，

    let clusterSource = new ol.source.Cluster({
       distance: 40,
       source: vectorSource,
       geometryFunction: (feature) => {
           if (feature.get('selected')) {
               return null;
           }
           return feature.getGeometry() as ol.geom.Point;
       }
    });

来自docs：

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

和

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

function handleClick() { const value = useContext(ListContext); }是useContext的反应，您不能将其调用为常规函数。页面加载完成后，React Hook自动运行。

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

1 个答案: