Событие onClick в React вызывает ошибку. Как чинить?

Только учусь работать на React. Решил написать кнопку. Повесил onClick на компонент ( например, ), ничего не произошло. Тогда я повесил onClick на div, в котором лежат другие компоненты и словил ошибку
react-dom.development.js:14199 Uncaught Error: SiteMusic(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Писал код в .jsx файлах. Ошибка в где-то в этом коде
import MusicLineInSiteMusic from "./components/MusicLineInSiteMusic.js"//Импортируем компоненты
import MusicList from "./components/MusicList.js"; //Импортируем компоненты
const { useEffect, useState } = React; //Подключаем нужные Хуки

function SiteMusic() {

    const [MusicLinesInMusicList,SetMusicLineInMusicList] = useState([]),/* Определяем массив с песнями*/
     [IsMusicListShowing, SetShowMusicList] = useState(0) /* Состояние отвечающее за видимость MusicList */; 

    function ShowMusicList()/*:void Показываем MusicList*/{
        SetShowMusicList(IsMusicListShowing + 1);
    }
    function hideMusicList()  /*:void скрываем MusicList*/{
        SetShowMusicList(IsMusicListShowing - 1);
    }

    if(IsMusicListShowing == 0) { //Если мы не должны показать MusicList, не рисуем его. Так же добавляем кнопку для того, что показать MusicList
        return (
            <div onClick={ShowMusicList}>
                <MusicLineInSiteMusic></MusicLineInSiteMusic>
            </div>
        );
    } else {/* Если мы должны показать MusicList, отрисовываем его. Так же добавляем кнопку для того, чтобы скрыть MusicList */
        <div>
            <MusicLineInSiteMusic onClick={hideMusicList}></MusicLineInSiteMusic>
            <MusicList MusicLinesInMusicList={MusicLinesInMusicList}></MusicList> 
        </div> 
    }
    
}
const To = document.getElementById("MusicInSiteLine"); // Указываем место, куда мы будем добавлять изменения

ReactDOM.render(<SiteMusic/>, To); //Добавляем изменения на сайт.

Ошибка срабатывает после клика по элементу. Где я ошибся
  • Вопрос задан
  • 104 просмотра
Решения вопроса 1
black1277
@black1277
Вольный стрелок
Ты делаешь условие
if(IsMusicListShowing == 0)
и в одной ветке делаешь return, а в другой просто пишешь
<div>
            <MusicLineInSiteMusic onClick={UnshowMusicList}></MusicLineInSiteMusic>
            <MusicList MusicLinesInMusicList={MusicLinesInMusicList}></MusicList>
        </div>

а должно через return возвращать, о чем тебе и сообщает ошибка.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы