Блог

Немного новичок в этом, так что мне понадобится некоторая ясность. Мне нужен сценарий, в котором я бы нажал кнопку, она переходит в REST api, инициирует запрос get от REST api и заполняет некоторые поля. вот фиктивный api REST, который я создал в Node.Js

 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": "lucas@blackorigins.com",  "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 заменив ее соответствующими данными, такими как полное имя , город, телефон, адрес, баланс в компоненте react, который выглядит таким образом

 import React, { useState } from 'react'; import { Link, useHistory } from 'react-router-dom';  const Balance = () =gt; {  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)=gt;response.json()).then((responseJson)=gt;{  setAccDetails(responseJson.data)  })  }    return (  lt;div align="center"gt;  lt;table border="0" width="98%"gt;  lt;trgt;  lt;tdgt;amp;nbsp;lt;/tdgt;  lt;/trgt;  lt;trgt;  lt;td className="homeFormTable"gt;  lt;table border="0" width="100%"gt;  lt;trgt;  lt;tdgt;  amp;nbsp;amp;nbsp;amp;nbsp;  lt;img border="0" src="images/FinancePlus_color_colorLogo.png" width="157" height="36" /gt;lt;/tdgt;  lt;td width="136"gt;  lt;p align="center" /gt;  lt;li className="Logout"gt;lt;Link to="/openaccount" className="ForLogout"gt;Logoutlt;/Linkgt;lt;/ligt;  lt;/tdgt;  lt;/trgt;  lt;/tablegt;  lt;/tdgt;  lt;/trgt;   lt;trgt;  lt;tdgt;amp;nbsp;lt;/tdgt;  lt;/trgt;  lt;div className="upMenuTable"gt;  lt;div className="nav-links"gt;  lt;ulgt;  lt;ligt;lt;Link to="/homepage"gt;Homelt;/Linkgt;lt;/ligt;  lt;ligt;lt;Link to="/openaccount"gt;Account Openinglt;/Linkgt;lt;/ligt;  lt;ligt;lt;Link to="/balance"gt;Account Balancelt;/Linkgt;lt;/ligt;  lt;ligt;lt;Link to="/transfers"gt;Transferslt;/Linkgt;lt;/ligt;  lt;ligt;lt;Link to="/cashmgt"gt;Deposit/Withdrawalslt;/Linkgt;lt;/ligt;  lt;/ulgt;  lt;/divgt;  lt;/divgt;  lt;div className="SideNav"gt;  lt;div className="sideNav-links"gt;  lt;ulgt;  lt;ligt;lt;Link to="/homepage"gt;Homelt;/Linkgt;lt;/ligt;  lt;ligt;lt;Link to="/openaccount"gt;Account Openinglt;/Linkgt;lt;/ligt;  lt;ligt;lt;Link to="/balance"gt;Account Balancelt;/Linkgt;lt;/ligt;  lt;ligt;lt;Link to="/transfers"gt;Transferslt;/Linkgt;lt;/ligt;  lt;ligt;lt;Link to="/cashmgt"gt;Deposit/Withdrawalslt;/Linkgt;lt;/ligt;  lt;/ulgt;  lt;/divgt;  lt;/divgt;  lt;div className="playTable"gt;  lt;tablegt;  lt;div align="center"gt;  lt;trgt;  lt;tdgt;  lt;p align="right" /gt;  lt;font face="Arial Black" size="1"gt;  Account Number:amp;nbsp;amp;nbsp;amp;nbsp;  lt;/fontgt;  lt;input type="text" name="T1" size="59" onChange ={(e) =gt;setAccNum(e.target.value)} className="searchBoxAcc" /gt;  lt;/tdgt;  lt;td width="121"gt;  lt;p align="right" /gt;  lt;input onClick={getAccountBal} type="submit" value="Search" name="B1" className="searchBoxBtn" /gt;  lt;/tdgt;  lt;/trgt;  lt;/divgt;  lt;div align="center" className="infoArea"gt;  lt;trgt;  lt;td width="18%" align="right"gt;lt;font face="Arial Black" size="1"gt;amp;nbsp;amp;nbsp;  Full Nameamp;nbsp;amp;nbsp;amp;nbsp; lt;/fontgt;  lt;/tdgt;  lt;td width="33%" align="left"gt;  lt;font face="Arial Black" size="2"gt;amp;nbsp;amp;nbsp; mmmmlt;/fontgt;  lt;/tdgt;  lt;td width="1%"gt;amp;nbsp;lt;/tdgt;  lt;td width="21%" align="right"gt;lt;font face="Arial Black" size="1"gt;amp;nbsp;amp;nbsp;  Addressamp;nbsp;amp;nbsp;amp;nbsp; lt;/fontgt;lt;/tdgt;  lt;td width="24%" align="left" rowspan="2"gt;  lt;font face="Arial Black" size="2"gt;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp; mmmmmlt;/fontgt;lt;p /gt;  lt;font face="Arial Black" size="2"gt;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp; lt;/fontgt;  lt;/tdgt;  lt;/trgt;  lt;trgt;  lt;td width="18%" align="right"gt;lt;font face="Arial Black" size="1"gt;amp;nbsp;amp;nbsp;  Cityamp;nbsp;amp;nbsp;amp;nbsp; lt;/fontgt;  lt;/tdgt;  lt;td width="33%" align="left"gt;  lt;font face="Arial Black" size="2"gt;amp;nbsp;amp;nbsp; mmmmmlt;/fontgt;  lt;/tdgt;  lt;td width="1%"gt;amp;nbsp;lt;/tdgt;  lt;/trgt;  lt;trgt;  lt;td width="18%" align="right"gt;lt;font face="Arial Black" size="1"gt;amp;nbsp;amp;nbsp;  Telephoneamp;nbsp;amp;nbsp;amp;nbsp; lt;/fontgt;  lt;/tdgt;  lt;td width="33%" align="left"gt;  lt;font face="Arial Black" size="2"gt;amp;nbsp;amp;nbsp; mmmmlt;/fontgt;  lt;/tdgt;  lt;td width="1%"gt;amp;nbsp;lt;/tdgt;  lt;td width="21%" align="right"gt;lt;font face="Arial Black" size="1"gt;amp;nbsp;amp;nbsp;  Balanceamp;nbsp;amp;nbsp;amp;nbsp; lt;/fontgt;lt;/tdgt;  lt;td width="24%" align="left" rowspan="2"gt;  lt;font face="Arial Black" size="2"gt;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp; mmmmmlt;/fontgt;lt;p /gt;  lt;font face="Arial Black" size="2"gt;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp; lt;/fontgt;  lt;/tdgt;  lt;/trgt;  lt;/divgt;  lt;/tablegt;  lt;/divgt;   lt;div className="Footer"gt;  lt;table className="footerTable"gt;  lt;p className="reserved"gt; amp;nbsp; amp;nbsp; amp;copy; Finance Plus 2021lt;/pgt;  lt;/tablegt;  lt;/divgt;  lt;/tablegt;  lt;/divgt;  ); }  export default Balance;  

Я новичок в этом, поэтому мне нужна какая-то ясность.

Когда запрос дает вам ответ, у вас есть информация в вашей accDetails переменной. Вам просто нужно распечатать его там, где вы хотите, используя {}… например {accDetails.полное имя}