React 하위 구성 요소는 useEffect 내부의 비동기 함수에서 상태 변경을 감지할 수 없습니다.
<p>useState 내부에 있는 비동기 함수 내부에서 생성된 상태를 전달하려고 합니다. 나는 useRef가 변경 가능한 상태를 참조할 수 있기 때문에 아마도 이 문제를 해결하는 가장 좋은 방법이라는 것을 배웠고, 그 과정에서 React-useStateRef에 대해 배웠습니다. 이는 마침내 메인 구성 요소 내부의 상태가 업데이트되지 않는 또 다른 문제를 해결했습니다. 문제(계속 " 렌더링이 너무 많습니다' 오류). 따라서 이는 본질적으로 useRef와 useState가 하나로 통합된 역할을 합니다. </p>
<p>그러나 내 상태가 마침내 업데이트되었지만 여전히 내 캔버스 구성 요소로 전달되지 않았습니다. 데이터 세트에서 얻은 온도를 기반으로 캔버스의 BG 그래프를 업데이트하려고 합니다. </p>
<pre class="brush:php;toolbar:false;">'react'에서 { useEffect }를 가져옵니다.
'react-usestateref'에서 useState를 가져옵니다.
'./serviceData'에서 { getServerData } 가져오기;
"./App.css" 가져오기
'./comComponents/Canvas'에서 캔버스를 가져옵니다.
함수 앱() {
const [dataset, setDataset] = useState(null);
const [units, setUnits] = useState('metric');
// 캔버스 배경 그래픽 항목
var [currentBG, setCurrentBG, currentBGref] = useState(null);
useEffect(() => {
const fetchServerData = 비동기 () =>
const 데이터 = getServerData(도시, 단위)를 기다립니다.
setDataset(데이터);
함수 업데이트BG() {
const 임계값 = 단위 === "미터법" 20: 60;
if (data.temp <= 임계값) {
setCurrentBG('눈');
}
또 다른 {
setCurrentBG('맑음');
}
}
업데이트BG();
}
fetchServerData();
console.log(현재BG)
}, [도시, 단위, currentBGref.current, currentFGref.current])
const isCelsius = currentUnit === "C";
버튼.innerText = isCelsius ? "°F" : "°C";
setUnits(isCelsius ? "미터법" : "영국식");
};
반품 (
<div className="app">
{ 데이터세트 && ( <캔버스 너비={640} 높이={480} currentBG={currentBGref.current}></Canvas> )}
</div>
);
}
기본 앱 내보내기;</pre>
<p>useEffect 내부의 console.log에는 확실히 업데이트 중이라고 표시되어 있지만 초기 값만 전달할 수 있으며 그 이후로는 업데이트되지 않습니다. 그렇다면 왜 내 구성 요소에 전달되지 않습니까? </p>
