代码之家 › 专栏 › 技术社区 › klabak

反应上下文-从函数中分派

react-hooks reactjs

klabak · 技术社区 · 2 年前

我必须在函数中调用dispatch(上下文,而不是Redux),但我不能这样做。( Error: Invalid hook call. Hooks can only be called inside of the body of a function component. )

有没有办法运行钩子(或者只运行钩子) dispatch )在从组件调用的函数中? 我可以用Redux做这个( store.dispatch(...) ),但我不知道如何使用React上下文进行此操作。

示例功能:

function someAction() {
  const { dispatch } = React.useContext(SomeContext);
  dispatch({
    type: "ACTION_NAME",
  });
}

我试图直接从组件调用该函数:

<button onClick={() => someAction()}>Click me</button>

当然,我可以通过 派遣 ,但我想避免这种情况,因为函数将被共享,而且应该很简单。

<button onClick={() => someAction(dispatch)}>Click me</button>

1 回复 | 直到 2 年前

Ori Drori 2 年前

只能在组件或其他挂钩中使用挂钩,但可以在其他函数中使用挂钩的返回值。提取 useContext 并使用返回的 dispatch :

const Component = () => {
  const { dispatch } = React.useContext(SomeContext);

  function someAction() {
    dispatch({
      type: "ACTION_NAME",
    });
  }

  return (
    <button onClick={someAction}>Click me</button>
  );
};

我将创建一个自定义钩子,返回动作函数,并在组件中使用它,以使其不那么笨重,更易于重用:

const useAction = () => {
  const { dispatch } = React.useContext(SomeContext);
  
  return () => dispatch({
    type: "ACTION_NAME",
  });
};

用法:

const Component = () => {
  const someAction = useAction();
  
  return (
    <button onClick={someAction}>Click me</button>
  );
};

推荐文章

Jonas · 反应挂钩-编辑后更新列表中的项目

2 年前

Selcukusu · 为什么在show-axios-react之后无法清除错误消息

2 年前

swamp blues · 如何从自定义挂钩收集和返回多个函数

2 年前

Daniel · 钩子中的状态跟踪和道具-React如何保持(跟踪)钩子中的状态和道具?

2 年前

Ben_Sven_Ten · 使用自定义IntersectionObserver钩子响应钩子/穷举deps警告

2 年前

FettFrank · 测量渲染React组件的时间

2 年前

ManP22 · 我想在同一次单击中调用两个常量

2 年前

Dhruv B. · 为什么{text.length}在react中不起作用。js代码。我想要更改状态文本的长度。请帮帮我

2 年前

user15137953 · 已求解的对象作为React子对象无效。如果要渲染子级集合,请改用数组。反应

2 年前

David · 如何多次使用fetch-get响应?

2 年前