React Component отключается, и я не знаю почему - PullRequest
Новая
       42

React Component отключается, и я не знаю почему

0 голосов
/ 26 апреля 2020

Я совершенно новичок во всем мире реакции, но я пытаюсь разработать SPA со встроенным календарем. Я использую реагирующий маршрутизатор для маршрутизации, реактивный большой календарь для календаря, топор ios для вызовов API и веб-пакет. Всякий раз, когда я загружаю свой Calender Component, он несколько раз монтируется и отключается, и я думаю, что мой API-вызов никогда не получает никаких данных. Я просто не могу понять, что вызывает это.

Код: 

  useEffect(() => {
    console.log("mounting Calendar")
    let source = Axios.CancelToken.source()
    if(!initialized) {
        console.log("getting Data")
       getCalendarEvents(source)
    }

    return () => {
        console.log("unmounting Calendar")
        source.cancel();
    }
})

 const getCalendarEvents = async source => {
    setInitialized(true)  
    setLoading(true)
    try {
        const response = await getCalendar({cancelToken: source.token})
        const evts = response.data.map(item => {
            return {
                ...item,
            }
        })
        calendarStore.setCalendarEvents(evts)
    } catch (error) {
        if(Axios.isCancel(error)){
            console.log("caught cancel")
        }else{
            console.log(Object.keys(error), error.message)
        }
    }
    setLoading(false)
}

Это результат, когда я рендерил компонент: Журнал консоли

Если вам понадобится еще код для оценки проблемы, я опубликую его. Я ценю любой вклад в решение моей проблемы.

Спасибо

1 Ответ

0 голосов
/ 26 апреля 2020

Это из-за использования эффекта. Если вы хотите, чтобы он запускался только один раз при монтировании, вам нужно передать пустой массив как зависимость: 

 useEffect(() => {
    console.log("mounting Calendar")
    let source = Axios.CancelToken.source()
    if(!initialized) {
        console.log("getting Data")
       getCalendarEvents(source)
    }

    return () => {
        console.log("unmounting Calendar")
        source.cancel();
    }
},[])

Это означает, что он будет запускаться только один раз. Если есть какое-то состояние или реквизит, вы хотели бы следить за ним, вы можете передать это в массив. Это означает, что useEffect будет следить за изменениями для всего, что передается в его массиве зависимостей, и перезапускается, если обнаружит изменение. Если он пуст, он просто запустится при монтировании.

...