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

【问题标题】：call custom hooks conditionally react调用自定义钩子有条件地做出反应
【发布时间】：2020-05-18 16:51:12
【问题描述】：

我定义了一个自定义钩子来执行一些操作并调用一些 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');

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

感谢任何想法。

【问题讨论】：

你没有在你的问题中说你在想什么条件？你刚才说通过不同的参数。你仍然可以使用条件，只是不要围绕实际的钩子调用，如 useState 或 useEffect
请提供更多上下文
抱歉耽搁了，我添加了一些上下文和示例。 @azium
做类似const [save ,response] = useCustomHook(param1,type===1 ? 'a' : 'b');
不遗憾，因为类型值是在调用钩子后指定的。 @ZunaibImtiaz

标签： reactjs react-native react-hooks

【解决方案1】：

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

let props = a
if (type === 1) {
  props = b
}

const [save, response] = useCustomHook(param1, props)

【讨论】：

调用钩子后确定type的值

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

例如：

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

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

【讨论】：