如何在箭头函数中使用反应钩子？答案

【问题标题】：How to use a react hook in an arrow function?如何在箭头函数中使用反应钩子？
【发布时间】：2021-07-27 14:15:35
【问题描述】：

我正在为医疗用例设计一个反应原生的应用程序。这个想法是记录一些音频并将其发送到本地服务器。因此，ip地址是在运行时定义的。

以前，我使用全局 const 作为地址（代码如下）。

const url = 'http://192.168.43.56:5000/';

const checkIsServerOnline = async (): Promise<string> =>
  axios.get(url, {
    timeout: 5000,
  });

现在我想在使用该函数之前从 redux（持久）存储中检索 url。我尝试了类似的方法，但没有成功：

function CheckIsServerOnline(): AxiosPromise {
  const { ipAdress } = useSelector(
    (state: RootState) => state.config
  );

  return axios.get(ipAdress, {
    timeout: 5000,
  });
}

它返回的错误信息：

无效的挂钩调用。 Hooks 只能在 a 的主体内部调用功能组件。这可能发生在以下情况之一原因：

您的 React 和渲染器版本可能不匹配（例如 React DOM）

您可能违反了 Hooks 规则

您可能在同一个应用中拥有多个 React 副本

您知道如何从 redux 状态中检索值吗？

（为初学者的问题道歉）

【问题讨论】：

“但是没用”怎么没用？你得到什么错误，或者什么意想不到的结果？请注意，钩子只能从其他钩子或组件函数中调用（嗯，无论如何，这是最简单的方法）。
对丢失的信息表示歉意。它显示了运行时控制台中原始帖子中添加的错误消息。没有完成 GET 请求。我曾考虑将它作为一个组件函数，使用 UseState() 来获得 IP，但我无法从组件中导出函数？为缺乏精确/模糊的术语道歉，我仍然是反应的初学者。
这是我认为的问题，您正在尝试在组件函数之外使用挂钩 (useSelector)。你不能那样做。我还没用过Redux，不过你可以用getState...
谢谢！最后，我确实使用了const state = store.getState();

标签： reactjs typescript react-native redux react-hooks

【解决方案1】：

React 钩子只能在 React 组件内部使用。

由于您使用的是 Redux，我认为您应该在商店初始化中设置 URL 调用。这是关于初始化状态的 redux 文档的链接：https://redux.js.org/recipes/structuring-reducers/initializing-state

一旦它处于 redux 状态，您就可以在任何地方检索它，这要感谢 redux 的 mapStateToProps。

【讨论】：