SetInterval 导致将状态变量更新为反应中的默认值

Question

我正在尝试从我的数据库中获取值（比如 X ），并每 3 秒从 (X+2)、(X-2) 范围内显示一个新的随机数。

默认值为

//in Reducer (Initial State)
cprice : {
     "available":50,
     "taken" : 0,
     "total" : 50,
     "price" : 50
 }

数据库中的值是

    cprice : {
        "available":50,
        "taken" : 0,
        "total" : 50,
        "price" : 70
    }

但是当我运行我的代码时，我认为 SetInterval 会重新渲染组件并将 cprice 设置为默认值。这是我的代码：

  useEffect(() => {
    startGetCPrice()
  }, [])                 <= gets new values for cprice

  const [currentCPrice, setCurrrentCPrice] = useState(0);

  useEffect(() => {
      window.setInterval(() => {
        console.log(cprice.price)        <--- cprice.price is 50 here
        setCurrrentCPrice(currentCPrice => randomCPrice(cprice.price));
      },3000)
  },[])

  console.log(currentCPrice); <--- currentCPrice is random number near 50 here
  let randomCPrice = (crpt) => {
    console.log(crpt)                  <--- cprt is 50 here
    return Math.random()*4 + crpt -2 ;
  }
  console.log( cprice.price) <--- cprice.price is 70 here

我得到接近 50 的随机数，但我希望数据库中的值附近的随机数每 3 秒更新一次。

Answer 1

您的 useEffect 回调仅在第一次渲染时被调用（当 currentCPrice 为默认值时），这意味着 setCurrrentCPrice 中的先前状态不是最新的

这应该可以解决您的问题

useEffect(() => {
      const interval = window.setInterval(() => {
        console.log(cprice.price)        <--- cprice.price is 50 here
        setCurrrentCPrice(currentCPrice => randomCPrice(cprice.price));
      },3000)
      return ()=> clearInterval(interval)
},[setCurrrentCPrice])