Почему я получаю ошибку недействительного хука, когда использую компонент из библиотеки 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

Вы не указываете, как на самом деле вы импортируете эти хуки в компоненте Checkbox?

Если Checkbox извлекает одну версию React, а другой проект - другую версию React (например, компонент, который используетФлажок импортирует другой React) вы, возможно, находитесь в ситуации You might have more than one copy of React in the same app.

Убедитесь, что и Флажок, и другой проект импортируют одну и ту же версию React.

Answer 2

Может, потому что вы используете const, а не ключевое слово function? попробуйте это:

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
    //
  );
};