可以非常更新状态第二吗？

Question

我试图在购物车中显示物品的数量。我希望计数每秒更新，因此，如果用户从购物车中添加或删除，它将每秒发出该请求并刷新，更新状态，数字将会更改。我只是尝试了这种方法，它可以正常工作，但是我想知道是否可以这样做，或者是否有更好的方法。

 const [update, setUpdate] = useState(0)
  const [data, setData] = useState([])

  let currentUser = 1

  const getData = () => {
      axios.get(`http://localhost:4000/api/userCart/${currentUser}`)
      .then((res) => {
          setData(res.data)
          setUpdate(++update)
      })
  }

  useEffect(() => {
    getData()
  }, [update])

  useEffect(() => {
    setInterval(() => {
      getData()
    }, 1000);
  },[])

Answer 1

我认为没关系，您只需要一种清除此间隔的方法，当您销毁该组件时，

const timer = useRef<any>(null);

timer.current = setInterval(() => {
   //your interval code
}, time);

useEffect(()=>{
 return () => {
    clearInterval(timer.current);
  }
},[])

我认为这可能是一个问题，您会遇到一个间隔和效果。

Answer 2

当您想提供像实时的经验时，这是好的。如果这将是生产的，则需要考虑将完成多少请求以及解决和获取数据所需的时间。

Vercel团队中有一个Pacakge SWR，您可以使用 https://swr.vercel.vercel.app/docs/docs/revalidationation ，它获取数据，验证其状态并在可用时提供缓存状态。 如果您想继续自己的实现，请尝试一下

，那么您需要考虑以下方面：

1. 如果以前的获取完成，则间隔将不关心数据。解决方案：获取数据然后运行SettieMout并通过新的获取清理解决
2. 。将每个超时保存在参考中，当组件清楚地表明超时
3. 没有正确的做事方式时，请尝试任何想法，如果它有效，则只需抛光效果，并避免了上述任何副作用：）

---

要在您共享的代码中考虑当前代码

，getData函数被调用两次，一个来自Interval，然后将requestin Data保留，然后在更新update> UPDATE prop时再次调用。

重构想法可以是这样：

// Out of component body
const UPDATE_INTERVAL = 1000

// In component body
const [update, setUpdate] = useState(0)
const [data, setData] = useState([])
const timer = useRef(null)
useEffect(() => {
  const triggerUpdate = setUpdate((n) => n + 1)
  const getData = () => {
    return axios.get(`http://localhost:4000/api/userCart/${currentUser}`)
  }
  getData()
    .then((res) => {
      setData(res.data)
      timer.current = setTimeout(triggerUpdate, UPDATE_INTERVAL)
    })
    .catch(console.error)
  return () => {
    clearTimeout(timer.current)
  }
}, [update])