亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

ReactjsのUIが更新されない
P粉649990163
P粉649990163 2023-08-14 17:32:30
0
1
859
<p>私は React を?qū)W習(xí)しており、いくつかの基本を?qū)Wんだので、この知識(shí)を使用してこの基本的なプロジェクトを作成しました。 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' をインポートします。 デフォルト関數(shù)のエクスポート Card(props) { const [showPara, setShowPara] = useState(false); const [データ、setData] = useState([]); console.log('カード內(nèi)部'); useEffect(() => { ノートデータ = []; にしましょう。 console.log('UseEffect 內(nèi)'); const fetchNote = async () => { const response = await fetch('https://notes-keeper-react-default-rtdb.firebaseio.com/notes.json'); const data = 応答を待ちます.json(); for (データ?jī)?nèi)の定數(shù)キー) { 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('カードコンテナ內(nèi)', 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('カードコンテナ內(nèi)', 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 は非同期関數(shù)であるため、タスクが完了してデータを取得するまでに時(shí)間がかかります。したがって、データの準(zhǔn)備ができるまで待つ必要があります。殘念ながら、fetchNote() を呼び出した直後に setData(notesData) を使用すると、データはまだ準(zhǔn)備ができていません。

または 非同期関數(shù)內(nèi)でデータを返し、必要なデータに解決される別の Promise を自動(dòng)的に返してから、データを更新できます。 リーリー

最新のダウンロード
詳細(xì)>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート