bigonion 发表于 2023-4-21 02:44:15

React 中setInterval 里setState 不变求助

# React 中setInterval 里setState值不变求助

我好累
最近在开发IOT展示页面,用React开发的
!(data/attachment/forum/202304/21/023857gyerl9ke4lg6m3d3.png)
效果大概是这样的效果
但是遇到了React一堆的问题,查资料有的用class有的用function,真头大
问题是这样的
首先用axios请求数据,我想把拿到手的数据作为props传给子组件,但是我发现tm压根不更新,查了说用Ref 也没啥用,真学不会了,求救......sos

```ts
function App() {
const = useState("/?");
const dataAllRef = useRef(dataAll);
useEffect(() =>{
    dataAllRef.current = dataAll;
});
useEffect(() => {
    const t = setInterval(() => {
      getData().then((e) => {
      let data = e.data;
      data = data.replace(/(\r)|(\?)/g, "");
      data = data.split(",");
      console.log(data);
      setdataAll(() => data);
      console.log(dataAll);
      });
    }, 4000);

    return () => {
      clearTimeout(t);
    };
}, []);

return (
    <>
      <div className="FLEX COL">
      <div className="FLEX ROW">
          <div className="MARGIN">
            <Calendar />
          </div>
          <div className="MARGIN">
            <div>
            <Process dataAll={dataAll}></Process>
            </div>
            <div>
            <Statisic dataAll={dataAll}></Statisic>
            </div>
          </div>
      </div>
      </div>
    </>
);
}
export default App;

function getData() {
return new Promise((resolve) => {
    let axiosConfig;
    axiosConfig = {
      method: "get",
      url: "http://10.0.0.133/getdata",
    };
    axios(axiosConfig)
      .then((res) => {
      resolve(res);
      })
      .catch((error) => {
      console.log(error);
      });
});
}

```


然后就是data死活不更新,总是停留在初值,大佬们帮看看(哭腔

bigonion 发表于 2023-4-21 02:45:08

请求的data 打印出来是正确的,但是dataAll是初值

王一之 发表于 2023-4-21 09:39:42

clearTimeout 写错了 clearInterval

不知道哥哥怎么写的子组件 我这样可以的
https://codesandbox.io/s/ecstatic-wilson-7mdp5v?file=/src/App.js

bigonion 发表于 2023-4-21 11:56:20

王一之 发表于 2023-4-21 09:39
clearTimeout 写错了 clearInterval

不知道哥哥怎么写的子组件 我这样可以的


太感谢gg了,问题解决了呜呜

bigonion 发表于 2023-4-21 11:57:40

王一之 发表于 2023-4-21 09:39
clearTimeout 写错了 clearInterval

不知道哥哥怎么写的子组件 我这样可以的


还有一件事,clearTimeout 其实是可以清除interval的定时器的

王一之 发表于 2023-4-21 13:33:31

bigonion 发表于 2023-4-21 11:57
还有一件事,clearTimeout 其实是可以清除interval的定时器的

一般都按标准的来
页: [1]
查看完整版本: React 中setInterval 里setState 不变求助