我只是想嘗試一個應用程式，在我的 html 中，我試圖回傳 userData 的道具，它在我的控制臺中記錄了 lineStatus 等內容，但是我似乎什么也沒回傳。
我的代碼如下：
import React, { useState, useEffect } from 'react'
import axios from "axios";
const tflData = "https://api.tfl.gov.uk/line/mode/tube/status";
axios.request(tflData).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.error(error);
});
function Lines() {
const [userData, setUserData] = useState({});
const tflUserWithFetch = async () => {
const response = await fetch(tflData);
const jsonData = await response.json();
setUserData(jsonData);
};
useEffect(() => {
tflUserWithFetch();
}, []);
return (
<div className="App">
<header className="App-header">
<h2>Line Data</h2>
</header>
<div className="user-container">
<h5 className="info-item">Tube station: {userData.name}</h5>
<h5 className="info-item">Status: {userData.lineStatuses}</h5>
</div>
</div>
);
}
export default Lines
基本上我試圖回傳值或內容值，但我錯過了一些東西。
uj5u.com熱心網友回復：
首先，選擇axios或fetch。有很多文章解釋了這些差異。
其次，在查看您提供的端點時，我可以看到結果在 JSON 串列中。因此無法直接訪問名稱和行狀態。但是，您可以通過映射串列中的每個值來包裝它：
<div className="App">
<header className="App-header">
<h2>Line Data</h2>
</header>
{userData.map((user) => (
<div className="user-container" key={user.id}>
<h5 className="info-item">Tube station: {user.name}</h5>
<h5 className="info-item">Status: {user.lineStatuses}</h5>
</div>))
}
</div>
uj5u.com熱心網友回復：
我試圖從您在代碼中提供的 URL 發出請求，它似乎回傳一個 JSON 陣列，因此當您嘗試訪問userData.name它時，userData 上不存在它，userData 包含一個串列
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/369217.html
標籤：javascript 反应
下一篇：如何用資料形成一個陣列陣列