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

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

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

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

React.js

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

Q&A

1回答

502閲覧

React.jsにてスライダーをスムーズに動かしたい

Tomato_leaf

総合スコア173

JavaScript

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

React.js

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

0グッド

1クリップ

投稿2023/01/09 05:56

編集2023/01/09 06:18

前提

家電をコントロールできるWebアプリのフロントエンド側をReact.jsを使用し作成しています。

実現したいこと

ライトの明るさを変更できるスライダー(LightSliderBar.js)があるのですが
スライダーを動かした時、なぜかスライダーがほとんど固まってしまい動かせないのを
スムーズに動かせるようにしたい。

発生している問題・エラーメッセージ

スライダーを動かした時、なぜかスライダーがほとんど固まってしまい動かせない。

サンプル動画

該当のソースコード

DiscoverOffice.js

1const DiscoverOffice = () => { 2 3 const [light, setLight] = useState([]); 4 5 const getDevices = async(data) => { 6 await axios.get('xxx.com', 7 { 8 headers: { 9 'Content-Type': 'application/json', 10 'Authorization': `Bearer ${cookies.get('accesstoken')}` 11 }, 12 }) 13 .then(result => { 14 setLight(result.data.attributes.light); 15 }) 16 .catch(err => { 17 console.log(err); 18 }); 19 } 20 21return ( 22 23 {light.map((item,i) => 24 25 <LightSliderBarDiscoverOffice item={item}/> 26 27 )} 28 29 ); 30} 31export default DiscoverOffice;

LightSliderBar.js

1 2const LightSliderBar = ({ item }) => { 3 4 const cookies = new Cookies(); 5 const entity_id = item.entity_id; 6 const [light, setLight] = useState([]); 7 const [brightness_value, setBrightnessValue] = useState(item.brightness); 8 9 10 const lightOn = async(data) => { 11 console.log("Body sent to server", { 12 entity_id: entity_id, 13 brightness: brightness_value 14 }) 15 await axios.post('xxx.com', 16 { 17 entity_id: entity_id, 18 brightness: brightness_value 19 }, 20 { 21 headers: { 22 'Content-Type': 'application/json', 23 'Authorization': `Bearer ${cookies.get('accesstoken')}` 24 }, 25 }) 26 .then(result => { 27 console.log('Turn on!'); 28 getDevices(); 29 }) 30 .catch(err => { 31 console.log('Turn on Missed!'); 32 }); 33 } 34 35 const getDevices = async(data) => { 36 await axios.get('xxx.com', 37 { 38 headers: { 39 'Content-Type': 'application/json', 40 'Authorization': `Bearer ${cookies.get('accesstoken')}` 41 }, 42 }) 43 .then(result => { 44 console.log(result.data) 45 setLight(result.data.attributes.light); 46 setBrightnessValue(result.data.attributes.light.filter(c => c.entity_id === entity_id).map((item,i) => item.brightness)[0]); 47 }) 48 .catch(err => { 49 console.log(err); 50 }); 51 } 52 53 54 55 useEffect(() => { 56 getDevices(); 57 }, []); 58 59return ( 60 <div> 61 <input className="range-input" type="range" name="speed" min="0" max="100" id="slider" 62 value={brightness_value} onChange={lightOn} style={{ background: gradient, }}></input> 63 64 </div> 65); 66}; 67 68export default LightSliderBar; 69

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

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

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

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

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

guest

回答1

0

関係あるか分からないですがスライダーがわずかでも動くたびに外部リクエストが発生してませんか?

投稿2023/01/09 08:10

yuma.inaura

総合スコア1453

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問