Question

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

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

我在某个地方使用了这个钩子，它也很好用：例如

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

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

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

但是，您知道钩子无法有条件地调用，因此上述代码无法运行。

任何想法都值得赞赏。

Answer 1

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

我用不同的方法解决了问题。

您可以尝试的是将第二个参数（在您的情况下为'a'或'b'）放入子组件的prop“键”中，这将在该键prop发生更改时强制重新加载组件。 / p>

例如：

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

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

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

1 个答案: