关于使用react hooks按分类分页请求问题

Question

在一个tab页面下进行page1和2请求，当切换到另一个tab时，会连续发起两个请求。

具体看network图里面倒数的2个请求，期望结果是切换tab只请求page为1的数据，有大佬知道怎样解决吗

求救。。

Answer 1

这是因为当page=2时,切换tab会触发一次page=2,tab=2的请求,这个时候还会触发另外一个useEffect将page设置为1,然后触发另外一次page=1,tab=2的请求,所以会出现两次请求.
解决的话,提前切换tab时重置page的时机,改为在切换tab同时重置page,如下

function App() {
  const [page, setPage] = useState(1)
  const [tab, setTab] = useState(1)

  useEffect(() => {
    // setPage(1)  // 注释掉这行
    // 保留其他重置操作
    // ...
  }, [tab])

  useEffect(() => {
    console.log(tab, page)
  }, [tab, page])

  return (
    <div className="App">
      <button
        onClick={() => {
          setPage(state => ++state)
        }}>
        page{page}
      </button>
      <button
        onClick={() => {
          setTab(state => ++state)
          setPage(1) // 在切换`tab`的同时,重置`page`
        }}>
        tab{tab}
      </button>
    </div>
  )
}