ReactjsのUIが更新されない
P粉649990163
2023-08-14 17:32:30
<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>
次のように記述するのも 1 つの方法です:
リーリーfetchNote
は非同期関数であるため、タスクが完了してデータを取得するまでに時間がかかります。したがって、データの準備ができるまで待つ必要があります。残念ながら、fetchNote()
を呼び出した直後にsetData(notesData)
を使用すると、データはまだ準備ができていません。または 非同期関数内でデータを返し、必要なデータに解決される別の Promise を自動的に返してから、データを更新できます。 リーリー