如何在react redux操作中使用自定义钩子

Question

我在这里想做的是使用钩子来简化代码

动作文件

export const getThings = (num) => async dispatch => {
dispatch({ type: constants.GET_HOME_PAGE_REQ });
const [res, error] = useFetch('get', api + "/latest/" + num, {});
useEffect(() => {
res && dispatch({
type: constants.GET_HOME_PAGE_RES,
status: res.status,
payload: res.data.message,
});
}, [res, dispatch]);
useEffect(() => {
error && dispatch({
type: constants.GET_HOME_PAGE_ERROR,
message: error.message,
status: error.status,
});
} , [error, dispatch]);
};

和我得到的错误

无效的钩子调用。钩子只能在函数组件的内部调用。这可能是由于以下原因之一:

1. 你可能有不匹配的版本的React和渲染器(如React DOM)
2. 你可能违反了Hooks的规则
3. 你可能在同一个应用程序中有多个React副本，请参阅有关如何调试和修复此问题的提示。

Answer 1

React钩子(和自定义钩子)的目的是管理React功能组件的状态和生命周期。所以在react组件之外使用它是没有意义的，你不允许这样做，因此控制台错误。如果您只想从API中获取一些数据，请创建如下变量:

const result = await fetch(...)

文档:https://reactjs.org/docs/hooks-intro.html

Answer 2

在基于函数的组件中使用像useEffect、useFetch这样的react钩子。它不能在普通的javascript函数中使用，你已经在该函数的返回部分中使用了它。