反作用吊钩和条件

Question

"钩子规则"提到：

不要在循环、条件或嵌套函数中调用Hook。

这是否也意味着我们应该避免这样的代码？

const useMyCoolHook = ({configKey, anotherProp}) => {
useEffect(() => {
// Do something with configKey here
}, [configKey])
useEffect(() => {
// Do something with configKey and anotherProp here
}, [configKey, anotherProp])
}
const Component = ({configKey, anotherProp}) => {
if(configKey === undefined) { return null; }
useMyCoolHook({configKey, anotherProp})
return (
<h1>Hello world</h1>
)
}

如果是，有没有办法避免在每个useEffect挂钩中包含条件？

Answer 1

到目前为止，您所拥有的代码看起来像一个普通的curstom钩子。然而你称它的方式是错误的，门楣应该给你以下警告：

React Hook"useMyCoolHook"是有条件调用的。在每个组件渲染中，必须以完全相同的顺序调用React Hooks。你是不是在提前回来后不小心叫了React Hook？

以下命令将使linter停止向您发出警告，但您必须反复检查configKey:的值

const useMyCoolHook = ({ configKey, anotherProp }) => {
useEffect(() => {
if (configKey !== undefined) {
// Do something with configKey here
}
}, [configKey]);
useEffect(() => {
if (configKey !== undefined) {
// Do something with configKey and anotherProp here
}
}, [configKey, anotherProp]);
};
const Component = ({ configKey, anotherProp }) => {
useMyCoolHook({ configKey, anotherProp });
if (configKey === undefined) {
return null;
}
return <h1>Hello world</h1>;
};

包装器组件是在尝试呈现Component之前检查configKey的另一个选项

const ComponentWrapper = ({configKey, anotherProp}) => {
if (configKey) {
return <Component configKey={configKey} anotherProp={anotherProp}/>
}
else {
return null;
}
}