是否有方法在单击回调中调用useContext？

Question

我正在学习React，并使用use方法访问自定义上下文：

// In a Provider file.
export const useUsefulObject(): UsefulObject {
  return useContext(...)
}

我希望在另一个文件中的单击回调中使用UsefulObject。为了方便起见，我将回调封装在一个方法someLogic中。

const PageComponent: React.FC = () => {
  return <Button onClick={(e) => someLogic(e)} />;
}

function someLogic(e: Event) { 
  const usefulObject = useUsefulObject();
  usefulObject.foo(e, ...); 
}

但是，VS代码警告说，在useUsefulObject中调用someLogic是违反钩子规则的，因为它是在组件方法之外调用的。

我可以向下传递对象(下面的代码工作！)但是，这感觉就像它违背了语境的意义，以避免所有的传承。还有比这更好的方法吗？

const PageComponent: React.FC = () => {
  const usefulObject = useUsefulObject();
  return <Button onClick={(e) => someLogic(e, usefulObject)} />;
}

function someLogic(e: Event, usefulObject) { 
  usefulObject.foo(e, ...); 
}

Answer 1

在组件呈现时需要调用钩子，所以最后一个想法是这样做的可能方法之一。另一个选项是您可以创建一个自定义钩子，它访问上下文并创建someLogic函数：

const PageComponent: React.FC = () => {
  const someLogic = useSomeLogic();
  return <Button onClick={(e) => someLogic(e)} />
}

function useSomeLogic() {
  const usefulObject = useUsefulObject();
  const someLogic = useCallback((e: Event) => {
    usefulObject.foo(e, ...);
  }, [usefulObject]);
  return someLogic;
}