React 组件被卸载，我不知道为什么

Question

我对整个 react 世界是一个全新的人，但我正在尝试开发一个带有集成日历的 SPA。我使用 react-router 进行路由，使用 react-big-calendar 进行日历，使用 axios 进行 API 调用和 webpack。 每当我加载我的日历组件时，它都会被安装和卸载几次，我认为这会导致我的 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)
}

这是我渲染组件时的结果： Console log

如果您需要更多代码来评估问题，我会发布。 我很感激任何可以解决我的问题的意见。

谢谢

Answer 1

这是因为useEffect。如果您希望它在挂载时只运行一次，您需要传递一个空数组作为依赖项，如下所示：

 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 将监视其依赖数组中传递的任何内容的更改，并在检测到更改时重新运行。如果它是空的，它只会在挂载上运行。