Question

我对整个React世界来说是一个全新的人，但是我正在尝试开发一个带有集成日历的SPA。我正在使用react-router进行路由，对日历使用react-big-calendar，对API调用使用axios和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将监视其依赖项数组中传递的所有内容的更改，并在检测到更改时重新运行。如果其为空，它将在安装时运行。

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

1 个答案: