Бесконечная рекурсия с использованием React Hooks

Question

Я использую React's State Hook в функциональном компоненте для получения терапевта из базы данных. Из того, что я видел, в useEffect (), где setTherapists ([therapists] .concat (therapists)); , список вызывается в бесконечной рекурсии. Я не вижу, где проблемы, или как мне нужно правильно вызвать список.

После того, как я исправлю массив массивов терапевтов, мне нужно отобразить весь терапевт. Это то, о чем я думал, но я не знаю точно, как писать с помощью Hooks State:

function renderTherapists()  {
    const items = this.state.therapists.map( (t, idx) => (
        <TherapistCard therapist={t} key={idx} />
    ))

    return (
        <div ref={0} className="therapist-list">
            { items }
        </div>
    )
}

Мой текущий функциональный компонент:

function TypeArticleOne(props) {

const [ therapists, setTherapists ]= useState([]);
const [speciality, setSpeciality]= useState('ABA');
const [pageLoading, setPageLoading]= useState(true);

const topProfilesUrl = 'therapists/top/profiles'

useEffect(() => {
    console.log(speciality);
    getTopTherapists();
    window.scrollTo(0, 0);

}, []);

const getTopTherapists = () => {
    setPageLoading(true);
    loadTopTherapists();

};

const loadTopTherapists = () => {
    console.log("second");
    props.actions.reqGetTherapistsTopProfiles({
        body: {},
        headers: null,
        resource: `${topProfilesUrl}`
    })
};

useEffect(() => {
        let apiData = props.apiData;

    if (apiData.topProfiles && apiData.topProfiles.success) {
        const therapists = apiData.topProfiles.therapists;
        setPageLoading(false);
        setTherapists([therapists].concat(therapists));

    }

    }, [pageLoading, therapists]);

Answer 1

Вам нужно передать терапевтам, идущим в реквизитах, значение по умолчанию вашей декларации useState:

const [ therapists, setTherapists ] = useState(apiData.topProfiles.therapists);

Так что, когда он перерисовывается, он не вызывается снова во всех oop .

Постоянные терапевты скрывают список терапевтов от вашей внешней области.

if (apiData.topProfiles && apiData.topProfiles.success) {
    const therapists = apiData.topProfiles.therapists;
    setPageLoading(false);
    setTherapists([therapists].concat(therapists));

}

Кроме того, поскольку это уже массив, вы можете вызывать метод concat, не помещая список в скобки [ ].

Как:

const loadedTherapists = apiData.topProfiles.therapists;
setPageLoading(false);
setTherapists(therapists.concat(loadedTherapists));