在回调中传递 custum 钩子

Question

我得到了一个自定义钩子。我还得到了一个需要函数的组件。该函数需要调用我的自定义钩子。这就是我要做的：

<MyComponent onSuccess={(result) => useCustomHook("value", result)} />

我的自定义钩子是这样的：

export function useCustomHook(param1, param2)
{
const dispatch = useDispatch();
dispatch(actionCreator.someAction(param1, param2));
dispatch(actionCreator.setSomeValue(true));
}

我收到一个错误，说：

不能在回调中调用 React Hook

我知道规则说我应该只在功能组件的顶层调用钩子，那么我在这里究竟如何实现我想要的东西呢？

Answer 1

我看不到您的自定义钩子在做什么(更重要的是，返回(。但是钩子的实现需要看起来像这样：

function OtherComponent () {
const callback = useCustomHook("value");
return (
<MyComponent onSuccess={(result) => callback(result)} />
);
}

在你的useCustomHook中，你可以返回一个函数，你可以调用它来做你想要实现的事情。

例如，如果您想在每次值更改时执行请求，则自定义钩子可能如下所示：

function useCustomHook() {
const [value, setValue] = useState();
useEffect(() => {
fetch(`http://my.api/${value}`);
}, [value]);
return setValue;
}

现在，setValue是从useCustomHook函数返回的，可以在组件中使用它来更改自定义挂钩内的value状态。

编辑

您已经添加了自定义钩子，它实际上看起来与上面的示例非常相似：

export function useCustomHook(key) {
const dispatch          = useDispatch();
const [value, setValue] = useState();
useEffect(() => {
dispatch(actionCreator.someAction(key, value));
dispatch(actionCreator.setSomeValue(true));
}, [key, value, dispatch]);
return setValue;
}

仅当给定的"依赖项"之一发生更改时，才会调用useEffect钩子。在上面的情况下，这只是在调用返回值和给定值更改时设置的value。

如果param1永远不会更改，则可以将其用作自定义钩子的参数，但如果它确实更改，钩子看起来会有点不同：

export function useCustomHook() {
const dispatch          = useDispatch();
const [key, setKey]     = useState();
const [value, setValue] = useState();
useEffect(() => {
dispatch(actionCreator.someAction(key, value));
dispatch(actionCreator.setSomeValue(true));
}, [key, value, dispatch]);
return (key, value) => {
setKey(key);
setValue(value);
};
}

在您的组件中，您可以像这样使用它：

function OtherComponent () {
const callback = useCustomHook();
return (
<MyComponent onSuccess={(result) => callback('value', result)} />
);
}

第二次编辑

如注释中所述，对于这种情况，根本不需要自定义钩子。您可以只使用常规函数并省略use前缀：

function OtherComponent () {
const dispatch = useDispatch();
const callback = (param1, param2) => {
dispatch(actionCreator.someAction(param1, param2));
dispatch(actionCreator.setSomeValue(true));
};
return (
<MyComponent onSuccess={(result) => callback('value', result)} />
);
}

如果您仍然想制作一个自定义钩子并在每次调用函数时调用调度，则自定义钩子可以像以下那样简单：

export function useCustomHook() {
const dispatch          = useDispatch();
return (key, value) => {
dispatch(actionCreator.someAction(key, value));
dispatch(actionCreator.setSomeValue(true));
};
}