调用自定义钩子有条件地做出反应

Question

我定义了一个自定义钩子来执行一些操作并调用一些API，如下所示

const useCustomHook = (param1,param2) => {
const response = callAPI(param1, param2 ){ .... }
return [callAPI, response]
}

我在某处使用了这个钩子，它也可以工作：例如

const [save ,response] = useCustomHook(param1,param2);

但是，我需要在不同条件下使用不同的参数调用save： 例如：

if (type===1) 
const [save ,response] = useCustomHook(param1,'a');
else 
const [save ,response] = useCustomHook(param1,'b');

type是从另一个钩子得到的，就像这样

const type = useType()

但是，如您所知，钩子不能有条件地调用，因此上面的代码不会运行。

任何想法都值得赞赏。

Answer 1

我认为您应该使用自定义钩子中的条件。您可以将类型作为自定义 Hook 中的第三个参数传递，并从那里处理条件逻辑。

Answer 2

我也有类似的问题。我正在调用一个使 API fetch 的自定义钩子，如果用户输入发生变化，我需要使用不同的参数再次调用它，所以我基本上需要一些条件或不同的参数与我的自定义钩子，这违反了 React 钩子规则。

我用不同的方法保存了我的问题。

您可以尝试将第二个参数(在您的情况下为"a"或"b"(放入子组件的 prop"key"中，如果此键 prop 发生变化，这将强制重新加载组件。

例如：

function ParentComponent() {
// logic of setting param2 based on type
/* You need to make sure keyprop changes as param2 changes. This would refresh ChildComponent and call customHook with new parameters */
return <ChildComponent key={keyprop} arg1={param1} arg2={param2} />
}
function ChildComponent(props) {
const [save ,response] = useCustomHook(props.arg1,props.arg2);
// do something with state
return (
/* ...display logic... */
)
}

我希望这种方法能解决你的问题。

Answer 3

如果我理解正确，您可以将条件 props 传递给自定义钩子

let props = a
if (type === 1) {
props = b
}
const [save, response] = useCustomHook(param1, props)