为什么在 react js 中使用 setInterval 生成随机数据而不是在某些秒后生成？

Question

我正在尝试在 react.but 中生成随机数据数据开始移动，就像在 1 秒后 1 个条目然后在另一秒后 5 个条目然后 26 然后 126 等等意味着每秒数据呈指数增长 generate.But 我只想在 1 秒后生成 1 条记录

function App() {

const [pktD,setPktD]=useState({
    chid:0,
    peakVal:0,
})
const dataGen=setInterval( function(){
setPktD({...pktD,chid:Math.random()*253});
setPktD({...pktD,peakVal:Math.random()*10000})

},5000)
console.log(dataGen);
return (
<></>
);
}

我也尝试在自定义挂钩中实现，但面对相同的 problem.First 条目在 5 秒后生成，但之后数据生成随机间隔。 myCustom hook 在下面我也试过了。

import React ,{useState} from "react"


function DataGenerator(){
const [pktD,setPktD]=useState({
    chid:0,
    peakVal:0
})
 const dataGen=function(){
setPktD({...pktD,chid:Math.random()*253});
setPktD({...pktD,peakVal:Math.random()*10000})
return pktD
}
 return [dataGen];
}
export default DataGenerator;

Answer 1

你可以这样做

import React, { useState, useEffect } from "react";

function App() {
  const [pktD, setPktD] = useState({
    chid: 0,
    peakVal: 0
  });
  useEffect(() => {
    const dataGen = setInterval(function () {
      // setPktD({ ...pktD, chid: Math.random() * 253 });
      // setPktD({ ...pktD, peakVal: Math.random() * 10000 });
      setPktD((prevState) => ({...prevState, chid: Math.random() * 253, peakVal: Math.random() * 10000}));
    }, 5000);

    return () => {
      clearInterval(dataGen);
    }
  }, []);
  console.log(pktD);
  return <></>;
}

export default App;

Answer 2

因为你没有清除间隔，所以也在 useEffect 中使用，因为它是运行异步的。

为什么在 react js 中使用 setInterval 生成随机数据而不是在某些秒后生成？

why Generating random data using setInterval in react js not Generating after certain seconds?

javascript

setinterval

web

reactjs

react-hooks