0

我有一个上下文：

export const AppConstArrays = createContext({
    neededHours: [],
    setNeededHours: (neededHours: INeededHours[]) => { },
    serviceTypes: [],
    setServiceserviceTypes: (serviceTypes:IServiceTypes[]) => { },
});

我能够在数据服务中使用 set 函数，这可以正常工作。

ArraysState.setNeededHours(neededHours);
ArraysState.setServiceserviceTypes(services);

当我尝试在其他地方使用它时，

export default function reCalc(index:number) {  //This is not a function component?
    const ArraysState = React.useContext(AppConstArrays);

}

tslinter 没问题，但在运行时，我得到了讨厌的 321 :-)

sp-webpart-workbench-assembly_en-us_8439e1230cb8ca442df6f89cf19f89a6.js:1 Uncaught Invariant Violation: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321
Hooks can only be called inside of the body of a function component

说实话，我在任何地方都没有提供者，因为我在 .ts 文件中使用它有什么帮助吗？谢谢大家

4

1 回答 1

0

正如错误消息中的链接所述：

Hooks 只能在函数组件的主体内部调用

这意味着您不能React.useContext在函数组件之外调用。

你不应该在 React 组件之外的任何地方使用 React 上下文中的值。如果您需要这样做，您可以简单地将它们作为输入参数从您的组件传递给这些函数（例如reCalc）。

例如，如果你想调用setNeededHours一个 API 调用函数，它可以是这样的：

function MyComponent() {
  const { setNeededHours } = React.useContext(AppConstArrays)

  React.useEffect(() => {
    fetchSomething({ /* input data */ }, setNeededHours)
  }, [])

  return <div>Some Content</div>
}

我希望它有所帮助。

于 2020-06-23T01:19:41.633 回答