Q&A
前提
家電をコントロールできる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
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。