ReactjsのUIが更新されない
P粉649990163
P粉649990163 2023-08-14 17:32:30
0
1
621
<p>私は React を学習しており、いくつかの基本を学んだので、この知識を使用してこの基本的なプロジェクトを作成しました。 ReactとFirebaseを使ってシンプルなメモ保存アプリを作成しています。 </p> <p>データは Firebase データベースに問題なく転送されます。 </p> <p>データを取得します。 </p> <p>私が直面している問題は、取得されたデータが UI で更新されないことです。 </p> <p><br /></p> <pre class="snippet-code-js lang-js prettyprint-override"><code>import { useEffect, useState } from 'react'; import { AiFillCaretUp } から 'react-icons/ai'; './Card.css' をインポートします。 デフォルト関数のエクスポート Card(props) { const [showPara, setShowPara] = useState(false); const [データ、setData] = useState([]); console.log('カード内部'); useEffect(() => { ノートデータ = []; にしましょう。 console.log('UseEffect 内'); const fetchNote = async () => { const response = await fetch('https://notes-keeper-react-default-rtdb.firebaseio.com/notes.json'); const data = 応答を待ちます.json(); for (データ内の定数キー) { NotesData.push({ id: key, title: data[key].title, note: data[key].note }); } }; fetchNote(); // console.log(notesData); setData(notesData); }、[]); const toggleHandler = () => { setShowPara((preVal) => !preVal); }; const paraClass = showPara ? 'カードパラトグル' : 'カードパラ'; constrotate = showPara ? 'アイコン回転' : 'アイコン'; 戻る ( <div className='コンテナ'> {console.log('カードコンテナ内', data)} {data.map((カード) => ( <div className='card' key={card.id}> <div className='card-title' onClick={toggleHandler}> <h3>{card.title}</h3> <AiFillCaretUp className={rotate} /> </div> <div className={paraClass}> <p>{card.note}</p> </div> </div> ))} </div> ); }</code></pre> <p><br /></p> <p>ここにデータを表示</p> <pre class="brush:php;toolbar:false;">{console.log('カードコンテナ内', data)}</pre> <p>でもうまくいきません</p> <pre class="brush:php;toolbar:false;">{data.map((card) => ( <div className='card' key={card.id}> <div className='card-title' onClick={toggleHandler}> <h3>{card.title}</h3> <AiFillCaretUp className={rotate} /> </div> <div className={paraClass}> <p>{card.note}</p> </div> </div> ))} </div></pre> <p>問題を理解していただければ幸いです。 </p>
P粉649990163
P粉649990163

全員に返信(1)
P粉276064178

次のように記述するのも 1 つの方法です:

リーリー

fetchNote は非同期関数であるため、タスクが完了してデータを取得するまでに時間がかかります。したがって、データの準備ができるまで待つ必要があります。残念ながら、fetchNote() を呼び出した直後に setData(notesData) を使用すると、データはまだ準備ができていません。

または 非同期関数内でデータを返し、必要なデータに解決される別の Promise を自動的に返してから、データを更新できます。 リーリー

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!