對此有點新，所以我需要一些清晰度。我想要一個場景，我將單擊一個按鈕，它轉到 REST api，從 REST api 發起一個 get 請求并填充一些欄位。這是我在 Node.Js 中創建的虛擬 REST api
https://financeplus.herokuapp.com/api/getaccounts/00343799710
當被呼叫時它會獲取此資訊
{
"error": false,
"data": {
"id": 0,
"fullname": "Lucas Tarella",
"address": "144 British Hush Ave",
"city": "Emory",
"state": "Georgia",
"tel": " 1(715)-232-7600",
"email": "[email protected]",
"nationalID": "AD87334322",
"gender": "Male",
"birth_date": "1989-05-10",
"ccy": "USD",
"bal": 950000,
"accNum": "00343799710",
"created_at": "2021-11-03T11:39:07.000Z",
"updated_at": "2021-11-04T06:38:38.000Z"
},
"message": "users List."
}
現在我希望它用這些資訊填充頁面，從而用mmmmm相應的資料替換 ，例如全名，城市，電話，地址，反應組件上的余額，看起來如此
import React, { useState } from 'react';
import { Link, useHistory } from 'react-router-dom';
const Balance = () => {
const[accNum, setAccNum] = useState('');
const[accDetails, setAccDetails] = useState('');
function getAccountBal(){
fetch('https://financeplus.herokuapp.com/api/getaccounts/' accNum,{
method : 'GET',
mode : 'cors',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
}).then((response)=>response.json()).then((responseJson)=>{
setAccDetails(responseJson.data)
})
}
return (
<div align="center">
<table border="0" width="98%">
<tr>
<td> </td>
</tr>
<tr>
<td className="homeFormTable">
<table border="0" width="100%">
<tr>
<td>
<img border="0" src="images/FinancePlus_color_colorLogo.png" width="157" height="36" /></td>
<td width="136">
<p align="center" />
<li className="Logout"><Link to="/openaccount" className="ForLogout">Logout</Link></li>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
<div className="upMenuTable">
<div className="nav-links">
<ul>
<li><Link to="/homepage">Home</Link></li>
<li><Link to="/openaccount">Account Opening</Link></li>
<li><Link to="/balance">Account Balance</Link></li>
<li><Link to="/transfers">Transfers</Link></li>
<li><Link to="/cashmgt">Deposit/Withdrawals</Link></li>
</ul>
</div>
</div>
<div className="SideNav">
<div className="sideNav-links">
<ul>
<li><Link to="/homepage">Home</Link></li>
<li><Link to="/openaccount">Account Opening</Link></li>
<li><Link to="/balance">Account Balance</Link></li>
<li><Link to="/transfers">Transfers</Link></li>
<li><Link to="/cashmgt">Deposit/Withdrawals</Link></li>
</ul>
</div>
</div>
<div className="playTable">
<table>
<div align="center">
<tr>
<td>
<p align="right" />
<font face="Arial Black" size="1">
Account Number:
</font>
<input type="text" name="T1" size="59" onChange ={(e) =>setAccNum(e.target.value)} className="searchBoxAcc" />
</td>
<td width="121">
<p align="right" />
<input onClick={getAccountBal} type="submit" value="Search" name="B1" className="searchBoxBtn" />
</td>
</tr>
</div>
<div align="center" className="infoArea">
<tr>
<td width="18%" align="right"><font face="Arial Black" size="1">
Full Name </font>
</td>
<td width="33%" align="left">
<font face="Arial Black" size="2"> mmmm</font>
</td>
<td width="1%"> </td>
<td width="21%" align="right"><font face="Arial Black" size="1">
Address </font></td>
<td width="24%" align="left" rowspan="2">
<font face="Arial Black" size="2"> mmmmm</font><p />
<font face="Arial Black" size="2"> </font>
</td>
</tr>
<tr>
<td width="18%" align="right"><font face="Arial Black" size="1">
City </font>
</td>
<td width="33%" align="left">
<font face="Arial Black" size="2"> mmmmm</font>
</td>
<td width="1%"> </td>
</tr>
<tr>
<td width="18%" align="right"><font face="Arial Black" size="1">
Telephone </font>
</td>
<td width="33%" align="left">
<font face="Arial Black" size="2"> mmmm</font>
</td>
<td width="1%"> </td>
<td width="21%" align="right"><font face="Arial Black" size="1">
Balance </font></td>
<td width="24%" align="left" rowspan="2">
<font face="Arial Black" size="2"> mmmmm</font><p />
<font face="Arial Black" size="2"> </font>
</td>
</tr>
</div>
</table>
</div>
<div className="Footer">
<table className="footerTable">
<p className="reserved"> © Finance Plus 2021</p>
</table>
</div>
</table>
</div>
);
}
export default Balance;
我對此很陌生，所以我需要某種清晰度。
uj5u.com熱心網友回復：
當請求給你一個答案時，你的accDetails變數中有資訊。您只需要使用 {} 將其列印在您想要的位置...例如 {accDetails.fullname}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/347968.html