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

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');

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

任何想法表示赞赏。

Answer 1

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

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

您可以尝试的是将第二个参数（在您的情况下为“a”或“b”）放入子组件的道具“key”中，这将在该关键道具发生变化时强制重新加载组件。

例如：

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... */
)
}

我希望这种方法可以解决您的问题。