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

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

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

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

React.js

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

Q&A

解決済

React.jsにてCannot read properties of undefined (reading 'value')というエラーが発生する

Tomato_leaf
Tomato_leaf

総合スコア170

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

React.js

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

1回答

0グッド

1クリップ

492閲覧

投稿2023/01/05 05:18

前提

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

実現したいこと

ライトの明るさを変更できるスライダー(LightSliderBar.js)がるのですが
スライダーを動かした時の数値をバックエンドに送りたい

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

Cannot read properties of undefined (reading 'value')

不思議なのが、スライダーを動かしてみると

handleSliderChangeの中

console.log(e);

の部分はコンソールにちゃんと出力しているのに、なぜこのようなエラーが出るのか不思議です。。。

イメージ説明

該当のソースコード

LightDetailOffice.js

1 2import React, { useState, useEffect, useCallback, onClick, useLayoutEffect } from 'react'; 3import axios from 'axios'; 4import Cookies from 'universal-cookie'; 5import { useSelector } from "react-redux"; 6import { useParams, Link, useHistory } from 'react-router-dom' 7 8import LightSliderBar from '../../slider_bar/LightSliderBar'; 9 10 11const LightDetail = () => { 12 const history = useHistory(); 13 14 const [light, setLight] = useState([]); 15 16 const {id} = useParams(); 17 const isLoggedIn= useSelector(state => state.user.isLoggedIn); 18 19 const { entity_id } = useParams(); 20 21const getDevices = async(data) => { 22 await axios.get('xxx.com', 23 { 24 headers: { 25 'Content-Type': 'application/json', 26 'Authorization': `Bearer ${cookies.get('accesstoken')}` 27 }, 28 }) 29 .then(result => { 30 console.log(result.data) 31 setLight(result.data.attributes.light); 32 }) 33 .catch(err => { 34 console.log(err); 35 }); 36} 37 38 39useEffect(() => { 40 getDevices(); 41 }, []); 42 43 44 45return ( 46 <div> 47 <HeaderForDetailPage /> 48 <p className="office_top">Office</p> 49 <div className="container container_light_detail"> 50 {isLoggedIn ? 51 <div className="row mx-auto text-center"> 52 <> 53 <div> 54 <LightSliderBar /> 55 </div> 56 </> 57 </div> 58 : 59 <div> 60 <p> You should login</p> 61 </div> 62 } 63 </div> 64 </div> 65 ); 66} 67export default LightDetailOffice;

LightSliderBarOffice.js

1import React, { useState, useEffect, useCallback, onClick, useLayoutEffect } from 'react'; 2import axios from 'axios'; 3import { useParams, Link, useHistory } from 'react-router-dom' 4import Cookies from 'universal-cookie'; 5 6 const LightSliderBar = () => { 7 const cookies = new Cookies(); 8 const { entity_id } = useParams(); 9 const [light, setLight] = useState([]); 10 11 const [brightness_value, setBrightnessValue] = useState(); 12 13 let percent = (brightness_value * 100) / 100; 14 let gradient =`linear-gradient(to right,#3C91E6 ` + percent + `%,#fff ` + percent + `%)`; 15 16 17 18 const handleSliderChange = (e) => { 19 console.log(e); 20 lightOn(e.target.value); 21 } 22 23 24 25 const lightOn = async(data) => { 26 console.log("Body sent to server", { 27 entity_id: entity_id, 28 rgb_color: [255, 255, 255], 29 brightness: brightness_value 30 }) 31 await axios.post('xxx.com', 32 { 33 entity_id: entity_id, 34 rgb_color: [255, 255, 255], 35 brightness: brightness_value 36 }, 37 { 38 headers: { 39 'Content-Type': 'application/json', 40 'Authorization': `Bearer ${cookies.get('accesstoken')}` 41 }, 42 }) 43 .then(result => { 44 console.log('Turn on!'); 45 getDevices(); 46 }) 47 .catch(err => { 48 console.log('Turn on Missed!'); 49 }); 50 } 51 52 const getDevices = async(data) => { 53 await axios.get('xxx.com', 54 { 55 headers: { 56 'Content-Type': 'application/json', 57 'Authorization': `Bearer ${cookies.get('accesstoken')}` 58 }, 59 }) 60 .then(result => { 61 console.log(result.data) 62 setLight(result.data.attributes.light); 63 setBrightnessValue(result.data.attributes.light.filter(c => c.entity_id === entity_id).map((item,i) => item.brightness)[0]); 64 }) 65 .catch(err => { 66 console.log(err); 67 }); 68 } 69 70 useEffect(() => { 71 getDevices(); 72 }, []); 73 74 75 return ( 76 <div> 77 <div className="range-container col-8"> 78 <input className="range-input" type="range" name="speed" min="0" max="100" id="slider" 79 value={brightness_value} onChange={(e) => handleSliderChange(e.target.value)} style={{ background: gradient, }}></input> 80 81 </div> 82 83 </div> 84 ); 85 }; 86 87 export default LightSliderBarOffice; 88

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

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

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

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

hoshi-takanori

2023/01/05 05:33

LightSliderBarOffice.js 79行目の onChange={(e) => handleSliderChange(e.target.value)} を onChange={(e) => handleSliderChange(e)} または onChange={handleSliderChange} にするとか?

回答1

0

ベストアンサー

実行して確認していませんが、

onChange={(e) => handleSliderChange(e.target.value)}

と呼んでるのに、

呼び先の、handleSliderChange(以下)で、さらに、e.target.valueを読もうとしているから、target.valueが無いんじゃないですかね。

js

1 const handleSliderChange = (e) => { 2 3 console.log(e); 4 5 lightOn(e.target.value); 6 7 }

lightOneを渡せば良いような気がします。

ちなみに、lightOnでdata使ってます?
stateに入れたい感じですかね?

投稿2023/01/05 05:43

FiroProchainezo

総合スコア2187

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

Tomato_leaf

2023/01/09 05:44

コメントありがとうございます。 onChange={(e) => handleSliderChange(e)} で解決しました!

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

React.js

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