我有一個要在組件return函式中呈現的物件串列。但是，由于某種原因，根本沒有渲染任何內容。
我正在關注這個官方的 React 指南
const DashboardOffers = () => {
// Get queryset of Offers
let qs_offers = []
fetch('http://127.0.0.1:8000/api/offer/', {
method: 'GET',
headers: {'Content-Type': 'application/json'},
})
.then(res => res.json())
.then(result => {
qs_offers = result
console.log(qs_offers)
})
// Create array of objects to render
const offer_items = qs_offers.map((offer) =>
<div>{offer.identifier}</div>
);
return (
<div>{offer_items}</div>
)
}
export default DashboardOffers
uj5u.com熱心網友回復：
把它做成一個鉤子組件，
https://reactjs.org/docs/hooks-overview.html
Hooks 是讓你從函陣列件中“鉤入”React 狀態和生命周期特性的函式。Hooks 在類中不起作用——它們讓你在沒有類的情況下使用 React。（我們不建議一夜之間重寫現有組件，但如果您愿意，可以在新組件中開始使用 Hooks。）
const DashboardOffers = () => {
const [offers, setOffers] = useState([]);
// Get queryset of Offers
useEffect(() => {
let qs_offers = []; // possibly not needed.
fetch("http://127.0.0.1:8000/api/offer/", {
method: "GET",
headers: { "Content-Type": "application/json" },
})
.then((res) => res.json())
.then((result) => {
setOffers([...offers, result])
console.log(qs_offers);
});
}, [offers]); // optional
// Create array of objects to render
const offer_items = qs_offers.map((offer) => <div>{offer.identifier}</div>);
return <div>{offer_items}</div>;
};
export default DashboardOffers;
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/457648.html
標籤：反应