[英]How to display JSON data inside render as table in React
我正在使用一個 API,它返回各種不同鍵值對的 JSON。 我試圖在render()
中將它們顯示為 2 列、鍵和值的表,其中分別包含對象鍵和值。
fetchBasicDetails()
的 API 是 POST,它以默認的 this.state 值作為輸入並返回 JSON 輸出。setState
方法將 JSON 輸出對象存儲到this.state 的birth_details屬性。forEach
和 Object.keys 在<table>
標簽中顯示對象數據,這根本不顯示任何內容。任何幫助表示贊賞。 謝謝你。
export default class HoroscopeReport extends React.Component {
constructor(props) {
super(props);
this.state = {
day: 11,
month: 2,
year: 2019,
hours: 12,
minutes: 59,
tzone: 5.5,
lat: 19.22,
lon: 25.2,
birth_details:{}
};
}
handleSubmit = event => {
event.preventDefault();
//console.log("Received user submitted data"+JSON.stringify(this.state))
this.fetchBasicDetails();
};
fetchBasicDetails() {
let myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
myHeaders.append("Authorization", "Basic XXXXXXXXXXXXXXX");
let urlencoded = new URLSearchParams();
urlencoded.append("day", this.state.day);
urlencoded.append("month", this.state.month);
urlencoded.append("year", this.state.year);
urlencoded.append("hour", this.state.hours);
urlencoded.append("min", this.state.minutes);
urlencoded.append("lat", this.state.lat);
urlencoded.append("lon", this.state.lon);
urlencoded.append("tzone", this.state.tzone);
let requestOptions = {
method: 'POST',
headers: myHeaders,
body: urlencoded,
redirect: 'follow'
};
fetch("https://json.astrologyapi.com/v1/birth_details", requestOptions)
.then(response => response.text())
.then(result => {
this.setState({ birth_details: result });
})
.catch(error => console.log('error', error));
}
render() {
return (
<div>
{/* FORM SUBMITTION CODE HERE */}
<h2>Output:-</h2>
<table border={2} cellPadding={5}>
<thead>
<tr>
<td>Key</td>
<td>Value</td>
</tr>
</thead>
<tbody>
Object.keys(this.birth_details).forEach(function (element) {
return <tr><td>element</td><td>this.birth_details[element]</td></tr>;
});
</tbody>
</table>
</div>
);
}
}
作為參考,這是 JSON 的輸出:-
{"year":2019,"month":2,"day":11,"hour":12,"minute":59,"latitude":19.22,"longitude":25.2,"timezone":5.5,"gender":" ","name":" ","seconds":0,"ayanamsha":24.124044280610406,"sunrise":"10:19:50","sunset":"21:47:13"}
通常在 React 中渲染基於數組的元素是使用map()
而不是forEach()
。 原因是使用map()
您可以在迭代的同時操作每個元素並為render
方法返回完全適合的JSX語法。 同時forEach()
不返回任何內容,只返回undefined
。
我想您可以嘗試以下操作:
render() {
return (
<div>
<h2>Output:-</h2>
<table border={2} cellPadding={5}>
<thead>
<tr>
<td>Key</td>
<td>Value</td>
</tr>
</thead>
<tbody>
{
this.state.birth_details &&
Object.keys(this.state.birth_details).map(function (element) {
return <tr>
<td>{element}</td>
<td>{this.state.birth_details[element]}</td>
</tr>;
});
}
</tbody>
</table>
</div>
);
}
我希望這有幫助!
請記住,您需要在 JSX 中使用花括號來表示您想要呈現值,而不是按原樣呈現代碼。
您還需要使用map
而不是forEach
。 map
用於將數組轉換為其他內容(我們正在獲取字符串列表並將它們映射到 React 元素),而forEach
用於僅對每個元素執行某些操作而不返回任何內容。
此外,您可能指的是this.state.birth_details
而不是this.birth_details
>
<tbody>
{
Object.keys(this.state.birth_details).map(function (element) {
return (
<tr key={element}>
<td>{element}</td>
<td>{this.state.birth_details[element]}</td>
</tr>
);
})
}
</tbody>
我還在返回的元素上設置了key
。 在此處閱讀有關 React 中列表和鍵的更多信息。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.