为什么我的页面在重新渲染组件时重新加载

Question

我正在执行一个 api 调用，然后为第一个请求中收到的每个对象执行另一个调用。

我在页面末尾有一个加载更多按钮，用于在页面上添加更多数据。

每次单击该按钮时，都会获取数据，但会重新加载页面，然后 UI 会返回到页面顶部，而不仅仅是附加新数据。

不确定什么会强制页面重新加载？

这是我的 useEffect 挂钩：

useEffect(() => {
    //this if/else statement is to find out if the page has been reloaded
    if (performance.navigation.type === 1) {
      console.log("This page is reloaded");
    } else {
      console.log("This page is not reloaded");
    }
    setLoading(true);
    let cancel;
    axios
      .get(currentPageUrl, {
        cancelToken: new axios.CancelToken((c) => (cancel = c)),
      }).then((res) => {
        setLoading(false);
        setNextpageUrl(res.data.next);
        setPokemons([...pokemons, ...res.data.results])
      
      }).catch((e) => {
        setErr(true)
      })
  }, [currentPageUrl]);

这个函数会改变 currentPageUrl :

  const handleClick = () => {
    setCurrentPageUrl(nextPageUrl);
  }

Answer 1

经过反复试验，解决方案是简单地创建一个函数来处理逻辑，然后将其放入使用效果中。

const request = () => {
  if (performance.navigation.type === 1) {
    console.log("This page is reloaded");
  } else {
    console.log("This page is not reloaded");
  }
  setLoading(true);
  let cancel;
  axios
    .get(currentPageUrl, {
      cancelToken: new axios.CancelToken((c) => (cancel = c)),
    }).then((res) => {
      setLoading(false);
      setNextpageUrl(res.data.next);
      setPokemons([...pokemons, ...res.data.results])  
    }).catch((e) => {
      setErr(true)
    })
}

useEffect(() => {
  request()
}, [currentPageUrl])

为什么我的页面在重新渲染组件时重新加载

why is my page reloading when re rendering a component

api

reactjs

axios

react-hooks

use-effect