與此問題類似：但資料來源于 fetch() ，并且有一個嵌套的 .then 來獲取資料物件 data.list_helado，這是一個字典的串列。
為什么資料不能呈現在頁面上？
import React, { useEffect, useState } from "react"。
import {Helados}. from "./components/Helados"。
function BiteroInfoPage(/span>) {
// Initate array of helados (a data object of type dict) and their states.
const [helados, setHelados] = useState([] )。
//從資料庫中獲取初始化的Helados串列。
useEffect(() => {
fetch("/list_initialized"/span>)
.then((response) => response.json()
.then((data) => {
const updatedData = [...data.list_helado]。
setHelados(upedData)。
});
}, []);
return (
<div className="biteroInfo"/span>>
<h1>Bitero Segments</h1>/span>
<Helados prop={helados}/>/span>
</div>/span>
);
};
export default BiteroInfoPage;
Helados.js的位置：
import React from 'react' /span>;
import { List, Header } from "semantic-ui-react"
export const Helados =（{prop}）=> {
console.log(prop)
console.log("上面回傳。(4) [{...}, {...}, {...}, {...}]"/span>)
return (
<List>/span>
{prop.map((helado, index) => {
回傳(
<List.Item key={index}>
<Header>{helado.study_name}</Header>/span>
</List.Item>/span>
);
})}
</List>)
);
};
uj5u.com熱心網友回復：
更新你的useEffect，看起來像這樣。你沒有正確處理response.json()。你不應該有任何嵌套的呼叫。
useEffect(() =>/span> {
fetch("/list_initialized"/span>)
.then((response) => response.json()
.then((data) => {
const updatedData = [...data.list_helado]。
setHelados(upedData)。
});
}, []);
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/332293.html
標籤：