<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>