Question

请勿在循环，条件或嵌套函数中调用Hooks。

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

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

到目前为止，您所拥有的代码看起来像普通的operator+。然而;如果您称呼它是错误的方式，则短绒棉衣应该给您以下警告：

React Hook有条件地调用“ useMyCoolHook”。在每个组件渲染中，必须以完全相同的顺序调用React Hook。提早归还后，您是否不小心打了个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>;
};

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

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

反应钩子和条件

1 个答案: