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); }) }, []);