Undefined переменная внутри функции React. Как исправить?

Question

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

Объявил переменную через useState. В моей программе я получаю музыку с сервера и записываю её в переменную с useState. Когда я долистываю до последней песни, я должен перезаписать переменную. Всё бы хорошо, но в return я переменную вижу, а в функции - нет. Строка 46 ( подписал в коде, внутри useEffect() ).

const { useEffect, useState, useMemo, useRef } = React;

import MusicSearchLine from "./AI/MusicSearchLine.js";
import MusicListMusicLine from "./AI/MusicListMusicLine.js";

var SearchFromVariable = 1;
const MusicList = ({MusicLinesInMusicList, FunctionHide}) => {

    const [MusicLines, SetMusicLines] = useState(), IsItPlaying = 0, LastVideo = useRef(), observer = useRef();
    let VariableToTimeOutSearchMusic;

    function SearchMusic(SearchFrom = 0){
        let FormDataToSearchMusic = new FormData();
        try{
            if(document.getElementById('MusicSearchLineInput').value == ''){
                
            } else {
                FormDataToSearchMusic.append('SearchTitle', document.getElementById('MusicSearchLineInput').value);
                FormDataToSearchMusic.append('SearchFrom', SearchFrom);
                fetch ('/scripts/GetMusic.php', {
                    method: 'POST',
                    body: FormDataToSearchMusic,
                }).then(
                    response => {
                        return response.json();
                    },
                ).then(
                    Response => {
                        SetMusicLines(Response);
                        SearchFromVariable = 1;
                    }
                )
            }
        } catch (error) {}
            
    }

    function LikeSearchMusic () {
        clearTimeout(VariableToTimeOutSearchMusic);
        VariableToTimeOutSearchMusic = setTimeout(SearchMusic, 2000);
    }
    useEffect (
        () => {
            var callback = function (entries, observer) {
                if (entries[0].isIntersecting) {
                    console.log(MusicLines) // undefined Вот тут ошибка!
                        if (MusicLines['IsThereMore'] == 1) {
                            var FormDataToFetchInInfiniteList/*:object[] Формдата для бесконечного списка музыки */ = new FormData();
                            SearchFromVariable += 1;
                            FormDataToFetchInInfiniteList.append('SearchFrom', SearchFromVariable);
                            FormDataToFetchInInfiniteList.append('SearchTitle', document.getElementById('MusicSearchLineInput').value);
                            fetch ('/scripts/GetMusic.php', {
                                method:"POST",
                                body: FormDataToFetchInInfiniteList
                            }).then (
                                response => {
                                    return response.json();
                                }
                            ).then (
                                Response => {
                                    var NewMusicLines /*:object[] В эту переменную запишем новое значение MusicLines */
                                     = [];NewMusicLines['IsThereMore'] = Response['IsThereMore'];
                                     NewMusicLines['count'] = Response['count'];
                                     NewMusicLines['array'] = MusicLines['array'] + Response['array'];
                                    SetMusicLines(NewMusicLines);
                                    console.log(MusicLines);
                                }
                            )
                        }
                   
                } 
            }
            observer.current = new IntersectionObserver(callback);
            observer.current.observe(LastVideo.current);
        }, []
    );

    return (
        //Div создан для того, чтобы поместить в него 3 самостоятельных элемента
        <div>
            <div className="ModalMusic" onClick={FunctionHide}></div>
            <div className="Music" id="Music">
                <MusicSearchLine
                    FSearchMusic/*Функция SearchMusic */ = {LikeSearchMusic}
                ></MusicSearchLine>
                {MusicLines == undefined ||  MusicLines['count'] == 0 
                    ?
                        <div> 
                            <div style={{width:"100px", position:"relative", top:"40px", left:"240px"}}>
                                <img src="/NecessaryFiles/pngnota.png" alt=""></img>
                            </div>
                            <div className="EmptySearchResult">
                                По вашему запросу ничего не найдено
                            </div>
                        </div>  

                    :
                        <div>
                            <div className="MusicListComponent">
                            {
                                MusicLines['array'].map((MusicLines, index, array) =>
                                    <MusicListMusicLine
                                        MusicLineData={MusicLines}
                                        counter={index + 1}
                                        IsItPlaying={IsItPlaying}
                                        key={index + 1}>
                                    </MusicListMusicLine>
                                )
                            }
                            </div> 
                        </div>
                }
            <div ref={LastVideo} style={{height: "0px"}}></div>
            </div>
        </div>
    );
}
export default MusicList;

Помогите найти ошибку

Answer 1

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

Я смог сам решить проблему. Для того, чтобы использовать переменную, объявленную через useStade() и изменяющую своё значение во время выполнения кода, внутри функции, надо указать её в массиве зависимостей useEffect().