arduino와 react를 연결한 페이지를 모바일에서 띄울 때 재렌더링 문제

Question

아두이노에서 받아온 데이터를 react에서 실시간으로 받아와야하는데 이를 브라우저에서 하면 아무 문제 없이 잘 되나, 모바일에선 초기값만 뜬 채로 새로 갱신이 되지 않습니다. 이유를 알 수 있을 까요?App.jsimport React from 'react'; import { BrowserView, MobileView } from 'react-device-detect'; import ArduinoCommunication from './ArduinoCommunication'; function App() { return (

); } export default App; ArduinoCommuication.jsimport React, { useEffect, useState } from 'react'; import axios from 'axios'; //const arduinoServerUrl = 'http://192.168.135.11'; const arduinoDataEndpoint = '/arduino-data'; const ArduinoCommunication = () => { const [arduinoData, setArduinoData] = useState('NA'); const [inp, setInp] = useState(''); const [arduinoServerUrl, setArduinoServerUrl] = useState(''); useEffect(() => { const intervalId = setInterval(() => { if(arduinoData!=='NA'){ getDataFromArduino(); } }, 100); return () => { clearInterval(intervalId); }; }, []); const getDataFromArduino = () => { axios.get(`${arduinoServerUrl}${arduinoDataEndpoint}`) .then((response) => { setArduinoData(response.data); }) .catch((error) => { console.error('Error fetching data:', error); }); }; const modifyIP = () =>{ setArduinoServerUrl('http://'+inp); getDataFromArduino(); } return (

{arduinoData==='NA'?

연결되지 않았습니다. input창에 기기에 표시되는 ip의 주소를 입력해주세요.

setInp(e.target.value)} />

{arduinoData} {arduinoServerUrl}

:

Data from Arduino: {arduinoData}

}

); }; export default ArduinoCommunication;

arduino와 react를 연결한 페이지를 모바일에서 띄울 때 재렌더링 문제

0개의 답변

기술 목록