質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

387閲覧

reactでのmap関数とsetInterval

GensIto

総合スコア20

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2022/07/24 07:25

編集2022/07/24 20:58

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をつける処理のみ書いています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2022/07/24 08:05

コードが部分的でよく分かりません。
GensIto

2022/07/24 08:08

コードを全部書きましたのでご確認よろしくお願いします
hoshi-takanori

2022/07/24 08:33

常に 2 秒おきに書き換えるということなら、updataToken を次のように書き換えて、useEffect で setInterval するとか? const updataToken = () => { setToken(tokens => tokens.map(_ => ({ tokenPrev: Math.floor(Math.random() * 1000), tokenRear: Math.floor(Math.random() * 1000), }))); }; useEffect(() => { setInterval(updataToken, 2000); }, []);
GensIto

2022/07/24 08:43

ご回答ありがとうございます! 無事してほしい挙動になりました ^ ^ 続いての質問で申し訳ないのですが,updataTokenの中のsetToken((tokens))というのはどういうふうに読み解けばいいでしょうか? シンプルに現在の配列の中身とよれるのでしょうか?
GensIto

2022/07/24 11:58

ありがとうございます!読んでみます!
guest

回答1

0

自己解決

hoshi-takanori
2022/07/24 17:33

常に 2 秒おきに書き換えるということなら、updataToken を次のように書き換えて、useEffect で setInterval するとか?

const updataToken = () => {
setToken(tokens => tokens.map(_ => ({
tokenPrev: Math.floor(Math.random() * 1000),
tokenRear: Math.floor(Math.random() * 1000),
})));
};

useEffect(() => {
setInterval(updataToken, 2000);
}, []);

ベストアンサーの仕方がわからないのでここに書き記させていただきます。

投稿2022/07/24 08:49

GensIto

総合スコア20

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問