React サブコンポーネントは useEffect 内の非同期関数からの状態変化を感知できません
P粉609866533
2023-09-02 12:55:44
<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>
useStateRef
はアンチパターンのようです。新しい状態が何であるかを決定するので、それへの別の参照が必要な場合は、いつでも自分で作成できます。不必要な再レンダリングを防ぐために、キャンバス上のプロパティを最小限に抑えることをお勧めします。あるいは、色を状態として保存する理由がないかもしれません。
setColor
関数を自分で作成し、イベント リスナーとしてアタッチすることができます -SVG もチェックすることをお勧めします。 SVG API は Canvas API よりも React パターンによく適合していることがわかりました。それぞれの機能は異なりますが、SVG がニーズに適している場合は、検討する価値があります。