我正在学习 React 并学习了一些基础知识,因此通过制作这个基本项目来利用这些知识。 我正在使用 React 和 Firebase 制作一个简单的笔记应用程序。
数据已完美传输至 Firebase 数据库 ✅。
获取数据✅。
我面临的问题是获取的数据没有在 UI 中更新。
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>
);
}
显示其中的数据
{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>
我希望您明白问题所在。
一种方法是这样写:
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
是一个异步函数,因此需要一些时间来完成其工作并获取数据。所以你应该等到数据准备好,不幸的是,当你在调用setData(notesData)
后立即使用
fetchNote()
时,数据还没有准备好
或者您可以在异步函数中返回数据,它会自动返回另一个解析为您想要的数据的承诺,您可以在那里更新数据:
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; // return the promise that resolves to 'notesData'
};
fetchNote()
.then((updatedData) => {
setData(updatedData)
})
}, []);