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

Question

前提

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

実現したいこと

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

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

Cannot read properties of undefined (reading 'value')

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

handleSliderChangeの中

の

console.log(e);

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

該当のソースコード

import React, { useState, useEffect, useCallback, onClick, useLayoutEffect } from 'react';
import axios from 'axios';
import Cookies from 'universal-cookie';
import { useSelector } from "react-redux";
import { useParams, Link, useHistory } from 'react-router-dom'

import LightSliderBar from '../../slider_bar/LightSliderBar';


const LightDetail = () => {
  const history = useHistory();

  const [light, setLight] = useState([]);

  const {id} = useParams();
  const isLoggedIn= useSelector(state => state.user.isLoggedIn);

  const { entity_id } = useParams();

const getDevices = async(data) => {
  await axios.get('xxx.com',
    {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${cookies.get('accesstoken')}`
      },
    })
    .then(result => {
      console.log(result.data)
      setLight(result.data.attributes.light);  
    })
    .catch(err => {
      console.log(err);
    });
}


useEffect(() => {
  getDevices();
	}, []);


  
return (
    <div>
      <HeaderForDetailPage />
      <p className="office_top">Office</p>
      <div className="container container_light_detail">
        {isLoggedIn ? 
        <div className="row mx-auto text-center">
            <>
                  <div>
                    <LightSliderBar />
                  </div>
            </>
        </div>
        :
        <div>
            <p> You should login</p>
        </div>
        }
      </div>
    </div>
  );
}
export default LightDetailOffice;

import React, { useState, useEffect, useCallback, onClick, useLayoutEffect } from 'react';
import axios from 'axios';
import { useParams, Link, useHistory } from 'react-router-dom'
import Cookies from 'universal-cookie';

  const LightSliderBar = () => {
    const cookies = new Cookies();
    const { entity_id } = useParams();
    const [light, setLight] = useState([]);

    const [brightness_value, setBrightnessValue] = useState();

    let percent = (brightness_value * 100) / 100;
    let gradient =`linear-gradient(to right,#3C91E6 ` + percent + `%,#fff ` + percent + `%)`;


  
    const handleSliderChange = (e) => {
      console.log(e);
      lightOn(e.target.value);
    }

    

    const lightOn = async(data) => {
      console.log("Body sent to server", {
      entity_id: entity_id, 
      rgb_color: [255, 255, 255],
      brightness: brightness_value
    })
      await axios.post('xxx.com',
        {
          entity_id: entity_id, 
          rgb_color: [255, 255, 255],
          brightness: brightness_value
        },
        {
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${cookies.get('accesstoken')}`
          },
        })
        .then(result => {
          console.log('Turn on!');
          getDevices();
        })
        .catch(err => {
          console.log('Turn on Missed!');
        });
    }

    const getDevices = async(data) => {
      await axios.get('xxx.com',
        {
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${cookies.get('accesstoken')}`
          },
        })
        .then(result => {
          console.log(result.data)
          setLight(result.data.attributes.light); 
          setBrightnessValue(result.data.attributes.light.filter(c => c.entity_id === entity_id).map((item,i) =>  item.brightness)[0]);  
        })
        .catch(err => {
          console.log(err);
        });
    }
    
    useEffect(() => {
      getDevices();
    }, []);


    return (
      <div>
        <div className="range-container col-8">
          <input className="range-input" type="range" name="speed" min="0" max="100" id="slider"
          value={brightness_value} onChange={(e) => handleSliderChange(e.target.value)} style={{ background: gradient, }}></input>
          
        </div>

      </div>
    );
  };
  
  export default LightSliderBarOffice;

Comments

[hoshi-takanori]

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

Answer 1

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

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

と呼んでるのに、

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

    const handleSliderChange = (e) => {

      console.log(e);

      lightOn(e.target.value);

    }

lightOnにeを渡せば良いような気がします。

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

Comments

[Tomato_leaf]

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