如何從回應資料中獲取第一個物件，并將其存盤在一個狀態中？
我嘗試過這樣的事情，我使用 setData 并將資料的第一個物件存盤到它：
export default function BuildingsDetail({buildingId}) {
const [data, setData] = useState({});
const navigate = useNavigate();
useEffect(()=> {
if (!localStorage.getItem('token')) {
navigate('/login');
} else {
fetch(Config.domain 'kingdom/buildings/:' buildingId, {
headers: {'Authorization': 'Bearer ' localStorage.getItem('token')}
})
.then(res=>res.json())
.then(data => {
setData(data[0]);
})
}
}, [buildingId])
console.log(data);
return(
<div className='container'>
<div className='building-details'>
<img />
<p></p>
<p></p>
{data.type === 'Academy' ? <BuildingsButton type={data.type} level={data.level}/> : ''}
<BuildingsButton type={data.type} level={data.level}/>
</div>
</div>
);
我收到 data.type 的未定義錯誤，我無法理解，因為它應該是一個具有“型別”鍵的物件。
此外，當我注銷資料時，它說未定義。
郵遞員的回復如下：
[
{
"id": 63,
"kingdom_id": 31,
"type": "Academy",
"level": 1,
"hp": 100,
"started_at": 1642410594584,
"finished_at": 1642410654584
}
]
uj5u.com熱心網友回復：
我認為問題在于您試圖在呼叫data加載之前顯示。fetch
將您的狀態默認值更改為null：
const [data, setData] = useState(null);
data并在渲染頁面之前添加一個條件來檢查狀態是否存在：
if (!data) {
return <>Loading data...</>
}
return (
<div className='container'>
<div className='building-details'>
<img />
<p></p>
<p></p>
{data.type === 'Academy' ? (
<BuildingsButton type={data.type} level={data.level} />
) : (
''
)}
<BuildingsButton type={data.type} level={data.level} />
</div>
</div>
);
它應該防止錯誤。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/413800.html
標籤：
上一篇：從某個元素的指標索引函式中的陣列