Используйте useState в библиотеке компонентов React

На чтение 3 мин Опубликовано 20.09.2024

Вопрос или проблема

Я хочу создать базовую библиотеку компонентов React. Настройка завершена, я могу создавать статические jsx и импортировать их. Но когда я пытаюсь использовать useState

import React, { useState } from ‘react’;

и делаю простой хук как

const [count, setCount] = useState(0);

я получаю ошибку:

Ошибка, обработанная стандартным ErrorBoundary React Router: TypeError: Невозможно прочитать свойства null (чтение ‘useState’)

Предупреждение: Неверный вызов хука. Хуки можно вызывать только внутри тела функционального компонента. Это может произойти по одной из следующих причин:

У вас могут быть несовпадающие версии React и рендерера (например, React DOM)
Вы могли нарушить правила работы с хуками
У вас может быть несколько копий React в одном приложении

Если я использую этот файл в своем проекте, он работает нормально, так что ошибки быть не должно. Есть идеи? Спасибо, ребята!

Мой код: https://bitbucket.org/ssbba/ssb-react-components/src/main/

Ответ или решение

Проблема, с которой вы столкнулись, связана с тем, как вы используете хуки React в вашей библиотеке компонентов. Давайте разберём основные причины и шаги для их устранения:

Несоответствие версий React и React DOM: Убедитесь, что версии react и react-dom в вашем проекте и в библиотеке компонентов совпадают. Это можно проверить в файле package.json обоих проектов. Если они различаются, установите соответствующие версии.
Правила использования хуков: Хуки, такие как useState, могут использоваться только внутри функциональных компонентов. Убедитесь, что вы не вызываете useState вне тела функционального компонента. Например, корректное использование будет выглядеть так:
```
import React, { useState } from 'react';

const MyComponent = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
};

export default MyComponent;
```
Проблема с несколькими копиями React: Если у вас в проекте установлены несколько копий React, это может вызвать ошибки. Проверьте node_modules в вашем проекте и в библиотеке, чтобы убедиться, что там нет различных версий React. Вы можете использовать команду npm ls react для проверки установленной версии.
Импортирование вашей библиотеки: Убедитесь, что вы правильно импортируете вашу библиотеку компонентов. Если вы используете сборщики типа Webpack и ваши компоненты были правильно собраны, импорты должны работать как ожидалось.

Если вы используете Yarn или npm, и они у вас биллируются независимо, добавьте вашу библиотеку как зависимость в ваш основной проект через npm install путь_к_вашей_библиотеки.
Testing в разных окружениях: Если ваша библиотека работает корректно в одном проекте, но не работает в другом, убедитесь, что окружение (например, версии других библиотек, конфигурация Webpack, Babel и т.д.) одинаковое.

В случае, если вышеописанные шаги не помогли, попробуйте создать минимальный репозиторий или пример приложения, где воспроизводится проблема, и проверьте там. Это может помочь в диагностике проблемы более точно.

Если у вас есть доступ к коду вашей библиотеки, посмотрите на структуру ее сборки, чтобы убедиться, что все зависимости и версии совпадают.