React サブコンポーネントは useEffect 内の非同期関数からの状態変化を感知できません
<p>非同期関数内で生成された状態を渡そうとしていますが、それ自体は useState 内にあります。 useRef は可変の状態を参照できるため、おそらくこの問題を解決する最良の方法であることを学び、その過程で React-useStateRef について学びました。これにより、メイン コンポーネント内の状態が更新されないという別の問題が最終的に解決されました。レンダリングが多すぎます)。したがって、基本的に useRef と useState を 1 つにまとめたものとして機能します。 </p>
<p>ただし、最終的に状態が更新されましたが、まだ Canvas コンポーネントに渡されていませんでした。データセットから取得した温度に基づいてキャンバスの BG グラフを更新しようとしています。 </p>
<pre class="brush:php;toolbar:false;">import { useEffect } from 'react';
useState を「react-usestateref」からインポートします。
import { getServerData } から './serviceData';
「./App.css」をインポートする
Canvas を './components/Canvas' からインポートします。
関数 App() {
const [データセット, setDataset] = useState(null);
const [単位, setUnits] = useState('metric');
// キャンバスの背景グラフィックのもの
var [currentBG, setCurrentBG, currentBGref] = useState(null);
useEffect(() => {
const fetchServerData = async () => {
const data = await getServerData(city, Units);
setDataset(データ);
関数 updateBG() {
const しきい値 = 単位 === "メトリック" ? 20 : 60;
if (data.temp <= しきい値) {
setCurrentBG('雪');
}
それ以外 {
setCurrentBG('晴れ');
}
}
updateBG();
}
fetchServerData();
コンソール.ログ(現在のBG)
}, [都市、単位、currentBGref.current、currentFGref.current])
const isCelsius = currentUnit === "C";
button.innerText = isCelsius ? "°F" : "°C";
setUnits(isCelsius ? "メートル法" : "インペリアル");
};
戻る （
<div className="アプリ">
{ データセット && ( <キャンバス幅={640} 高さ={480} currentBG={currentBGref.current}></Canvas> )}
</div>
);
}
デフォルトのアプリをエクスポート;</pre>
<p>初期値のみを渡すことができ、それ以降は更新されません。ただし、useEffect 内の console.log には、確実に更新されていることが示されています。では、なぜコンポーネントに渡されないのでしょうか? </p>
