无法在功能组件中调用 useContext

Question

我能够通过以下组件更新上下文：

const LightController: React.FC<LightControllerInterface> = ({ devices }) => {
const { state, dispatch } = useContext(AppContext);
const handleFoo1 = () => {
dispatch({
key: 'foo1',
data: !state.foo1
})
}
const handleFoo2 = () => {
dispatch({
key: 'foo2',
data: !state.foo2
})
}
return (
<div>
<button onClick={handleFoo1}>Foo1</button>
<button onClick={handleFoo2}>Foo2</button>
</div>
);
};

但是，由于handleFoo1和handleFoo2函数在多个组件中使用，因此将其抽象并创建如下所示的共享功能组件会很方便：

//Loader.tsx
export const handleFoo1 = (value) => {
const { state, dispatch } = useContext(AppContext);
dispatch({
key: 'foo1',
data: value
})
}
export const handleFoo2 = (value) => {
const { state, dispatch } = useContext(AppContext);
dispatch({
key: 'foo2',
data: value
})
}

它将像下面这样使用：

import {handleFoo1, handleFoo2} from './loader.tsx'
const LightController: React.FC<LightControllerInterface> = ({ devices }) => {
const { state, dispatch } = useContext(AppContext);
return (
<div>
<button onClick={handleFoo1(!state.foo1)}>Foo1</button>
<button onClick={handleFoo2(!state.foo2)}>Foo2</button>
</div>
);
};

第一个版本工作正常，但是对于抽象的功能组件，我得到一个常见的错误：

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

这里有什么我缺少的吗？

提前谢谢。

Answer 1

我认为问题出在函数handleFoo1和handleFoo2上，因为它们不返回反应元素，并且反应不将它们视为反应功能组件

"这个函数是一个有效的 React 组件，因为它接受一个带有数据的"props"(代表属性(对象参数并返回一个 React 元素 https://reactjs.org/docs/components-and-props.html。">

这就是为什么您收到这样的错误"错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一而发生的：'

也许最好将调度作为第二个参数传递给该函数

export const handleFoo1 = (value, dispatch) => {
dispatch({
key: 'foo1',
data: value
})
}