为什么当我使用 umd 库中的组件时出现无效钩子错误

Question

我创建了一个简单的Checkbox组件，它使用useEffect和useState来处理组件的检查状态。

我已将此组件添加到我的组件集合(包含所有组件的自己的项目(中。但是，如果我想在其他项目中使用该组件，则会收到以下错误消息：https://reactjs.org/docs/error-decoder.html/?invariant=321

如果我取消注释useState和useEffect方法，该组件也可以工作，如果我将整个组件复制到我的项目中(使用 useEffect 和 useState 方法！！

我已经尝试了推荐的解决方案(https://reactjs.org/warnings/invalid-hook-call-warning.html(，但它没有解决我的问题。

const Checkbox = (props) => {
  const [isChecked, setIsChecked] = useState(props.checked); // initialize isChecked with the prop checked (true/false)
  useEffect(() => {
    if (props.getCheckedState) {
      props.getCheckedState(isChecked); // to get the status of isChecked in my parent component
    }
  }, [isChecked]);
  return (
    //
    // My component
    //
  );
};
export {Checkbox};

Answer 1

也许是因为您使用的是 const 而不是函数关键字？ 试试这个：

export function Checkbox(props) {
  const [isChecked, setIsChecked] = useState(props.checked); // initialize isChecked with the prop checked (true/false)
  useEffect(() => {
    if (props.getCheckedState) {
      props.getCheckedState(isChecked); // to get the status of isChecked in my parent component
    }
  }, [isChecked]);
  return (
    //
    // My component
    //
  );
};

Answer 2

您没有指定如何在复选框组件中实际导入这些钩子？

如果 Checkbox 拉取一个版本的 React，而其他项目拉取另一个版本的 React(例如，使用 Checkbox 的组件导入不同的 React(，您可能处于You might have more than one copy of React in the same app情况。

确保 Checkbox 和其他项目都导入相同版本的 React。