reactでtokenを生成しtodoのように追加でき、一定時間が経ったら再生成する処理を書いています。
現在更新ボタンを押したら更新するような処理がかけてボタンを押した時の挙動が理想の動きなのですがsetIntervalで2秒後に処理をしようとするとちらつきが見えてしまいます。
理想としましては全部一気に切り替わって欲しいのが順番にちらつきなが出てきてしまうのを全部一斉に切り替わって欲しいのですがどのように書けばよろしいでしようか?
import { useState, useEffect, useRef } from "react"; import "./App.css"; import { TokenNumber } from "./components/TokenNumber"; function App() { const [token, setToken] = useState([]); const OnClickAdd = () => { console.log("add"); const newToken: any = [ ...token, { tokenPrev: Math.floor(Math.random() * 1000), tokenRear: Math.floor(Math.random() * 1000), }, ]; setToken(newToken); console.log(token); }; const onClickDelete = () => { console.log("delete"); const newToken = [...token]; newToken.pop(); setToken(newToken); console.log(token); }; const updataToken = () => { const updataTokenData = [...token]; updataTokenData.map((token) => { token.tokenPrev = Math.floor(Math.random() * 1000); token.tokenRear = Math.floor(Math.random() * 1000); }); setToken(updataTokenData); }; console.log(token); return ( <div> <button id='test' onClick={updataToken}> 更新 </button> <button onClick={OnClickAdd}>+</button> <button onClick={onClickDelete}>-</button> {token.map((task, index) => { return ( <TokenNumber key={index} tokenPrevNumber={task.tokenPrev} tokenRearNumber={task.tokenRear} /> ); })} </div> ); } export default App; }; setTimeout(updataToken, 2000);
コンポーネントTokenNumberでは乱数が一桁なら00をつけ2桁なら0をつける処理のみ書いています
回答1件
あなたの回答
tips
プレビュー