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 } from 'react-icons/ai';
import './Card.css';
export default function Card(props) {
const [showPara, setShowPara] = useState(false);
const [data, setData] = useState([]);
console.log('inside card');
useEffect(() => {
let notesData = [];
console.log('inside UseEffect');
const fetchNote = async () => {
const response = await fetch('https://notes-keeper-react-default-rtdb.firebaseio.com/notes.json');
const data = await response.json();
for (const key in data) {
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 ? 'card-para toggle' : 'card-para';
const rotate = showPara ? 'icon rotate' : 'icon';
return (
<div className='container'>
{console.log('inside card container', data)}
{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>
);
}</code></pre>
<p><br /></p>
<p>在此顯示資料</p>
<pre class="brush:php;toolbar:false;">{console.log('inside card container', 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>
一種方法是這樣寫：
useEffect(() => { let notesData = []; const fetchNote = async () => { const response = await fetch('https://notes-keeper-react-default-rtdb.firebaseio.com/notes.json'); const data = await response.json(); for (const key in data) { notesData.push({ id: key, title: data[key].title, note: data[key].note }); } setData(notesData); // 在这里数据已经准备好了 }; fetchNote(); }, []);fetchNote是一個非同步函數，所以它需要一些時間來完成任務並取得資料。因此，你應該等待資料準備好，不幸的是，當你在呼叫fetchNote()後立即使用setData(notesData)時，資料還沒準備好。或你可以在非同步函數內部返回數據，並自動返回另一個解析為所需數據的 promise，然後你可以更新你的數據：
useEffect(() => { let notesData = []; const fetchNote = async () => { const response = await fetch('https://notes-keeper-react-default-rtdb.firebaseio.com/notes.json'); const data = await response.json(); for (const key in data) { notesData.push({ id: key, title: data[key].title, note: data[key].note }); } return notesData; // 返回一个解析为 'notesData' 的 promise }; fetchNote() .then((updatedData) => { setData(updatedData); }) }, []);