Не могу подключить useState к react. Что делать?

Question

[Евгений Усачев]

Я только начал осваивать react. Открыл на официальном сайте react`а инструкцию по подключению react`а к сайту. Подключил react через

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Потом я, следуя инструкции, создал папку src и начал писать в ней файлы с расширением .jsx . Я смог подключить компоненты, вывести что-то на экран. И тут дело дошло до "хуков". Я увидел в гайде ( уже на неофициальной странице), как использовать useState. Подстроил код под свои нужды и после компиляции увидел ошибку.

Uncaught ReferenceError: useState is not defined

Самое удивительное в этой истории то, что я подключил useState даже в .jsx .
Вот мой код

import React, { useEffect, useState } from 'react';

const ButtonPlayOrPause = () =>{
    const [isItPlay, StopOrContinue] = useState(1);//ошибка тут

    function PauseSong(){
        StopOrContinue(isItPlay -= 1);
    }

    function PlaySong(){
        StopOrContinue(isItPlay += 1);
    }
    if(isItPlay == 1){
        return (
            <div className="BlockToButtonPlayOrPause">
                <div className="ButtonPlayOrPauseSong">
                    <img alt="||" className="imgButtonPlayOrPause" onClick={PauseSong} src=".../NecessaryFiles/white_pause.png"></img>
                </div>
            </div>
        );
    } else {
        return (
            <div className="BlockToButtonPlayOrPause">
                <div className="ButtonPlayOrPauseSong">
                    <img alt=">" className="imgButtonPlayOrPause" onClick={PlaySong} src=".../NecessaryFiles/white_play.png"></img>
                </div>
            </div>
        );
    }
};

export default ButtonPlayOrPause;

Весь этот код написан в файле с расширением .jsx

Answer 1

[black1277]

Замените эту строку

import React, { useEffect, useState } from 'react';

на эту
const { useEffect, useState } = React

Comments

[Евгений Усачев]

Ничего не изменилось. Ошибка та же в той же строчке.

[black1277]

Евгений Усачев, а как вы подключаете код к html файлу.

[Евгений Усачев]

black1277,
Подключил react через

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

[black1277]

Евгений Усачев, это я уже видел, это библиотеки, я про ваш пользовательский код.

[Евгений Усачев]

black1277, Я не очень понял, что вам нужно знать, чтобы мне помочь. React к файлам я подключал через

import React, { useEffect, useState } from 'react';

Хотя к .jsx файлам его подключать не надо. Компоненты я экспортировал и импортировал. Экспорт есть в моём вопросе. Импорт выглядел так.

import ButtonPlayOrPause from "./AI/ButtonPlayOrPause.js";

[black1277]

Если вы подключаете к html React вот так:

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

то вот так уже делать не нужно

import React, { useEffect, useState } from 'react';

потому что в глобальной области видимости появляется объект React - это можно проверить в консоли набрав React. Из этого объекта можно деструктуризацией вытащить все необходимые хуки, что я вам и показал в ответе. Остается, вопрос каким способом вы подключаете СВОЙ код к html, потому что благодаря модульной области видимости он может быть в другом пространстве имен.

[Евгений Усачев]

black1277, Это интересное предположение. У меня есть React файл SiteMusic.js. Его я подключаю к html ( вы могли видеть это в моём вопросе). А уже в нём я импортирую файл MusicLineInSiteMusic.js, который импортирует все остальные файлы, в одном из которых возникает вышеуказанная ( в вопросе) ошибка. Система очень запутанная, но по-другому придётся умещать более 1000 строк кода в один файл, что не слишком удобно.

[Евгений Усачев]

black1277, Я попробовал решить проблему. Ваш способ решения подошёл. ( Сразу он не подошёл, так как тогда в моём коде была ещё одна ошибка и файл с решением не скомпилировался, извиняюсь, что отнял столько времени.) Спасибо!