如何从Node.js REST API获取数据并填充React组件页面占位符

你只需要对现有组件做三处简单修改即可实现需求，具体操作如下：

• 调整accDetails状态的初始值
  原来的初始值为空字符串，修改为空对象避免后续读取字段时报属性不存在的错误：

// 修改前
const[accDetails, setAccDetails] = useState('');
// 修改后
const[accDetails, setAccDetails] = useState({});

• 给请求增加异常处理逻辑
  在原有fetch逻辑基础上增加报错分支，覆盖网络异常、账号不存在等异常场景：

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)=>{
        if(!responseJson.error){
            setAccDetails(responseJson.data)
        }else{
            alert(responseJson.message || '查询失败，请检查账号是否正确')
        }
    })
    .catch((err)=>{
        alert('请求失败，请检查网络连接')
        console.error(err)
    })
}   

• 替换模板中的占位符
  把页面里所有的mmmmm占位符替换成对应字段取值，用可选链判断数据存在性，未查询时显示提示文案：

// 完整修改后的模板部分
<div className="playTable">
    <table>
        <div align="center">
            <tr>
                <td>
                    <p align="right" />
                    <font face="Arial Black" size="1">
                        Account Number:&nbsp;&nbsp;&nbsp;
                    </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">&nbsp;&nbsp;
                    Full Name&nbsp;&nbsp;&nbsp; </font>
                </td>
                <td width="33%" align="left">
                    <font face="Arial Black" size="2">&nbsp;&nbsp; {accDetails?.fullname || '请先查询账号信息'}</font>
                </td>
                <td width="1%">&nbsp;</td>
                <td width="21%" align="right"><font face="Arial Black" size="1">&nbsp;&nbsp;
                    Address&nbsp;&nbsp;&nbsp; </font></td>
                <td width="24%" align="left" rowspan="2">
                    <font face="Arial Black" size="2">&nbsp;&nbsp;&nbsp;&nbsp; {accDetails?.address || '请先查询账号信息'}</font><p />
                    <font face="Arial Black" size="2">&nbsp;&nbsp;&nbsp;&nbsp; </font>
                </td>
            </tr>
            <tr>
                <td width="18%" align="right"><font face="Arial Black" size="1">&nbsp;&nbsp;
                    City&nbsp;&nbsp;&nbsp; </font>
                </td>
                <td width="33%" align="left">
                    <font face="Arial Black" size="2">&nbsp;&nbsp; {accDetails?.city || '请先查询账号信息'}</font>
                </td>
                <td width="1%">&nbsp;</td>
            </tr>
            <tr>
                <td width="18%" align="right"><font face="Arial Black" size="1">&nbsp;&nbsp;
                    Telephone&nbsp;&nbsp;&nbsp; </font>
                </td>
                <td width="33%" align="left">
                    <font face="Arial Black" size="2">&nbsp;&nbsp; {accDetails?.tel || '请先查询账号信息'}</font>
                </td>
                <td width="1%">&nbsp;</td>
                <td width="21%" align="right"><font face="Arial Black" size="1">&nbsp;&nbsp;
                    Balance&nbsp;&nbsp;&nbsp; </font></td>
                <td width="24%" align="left" rowspan="2">
                    <font face="Arial Black" size="2">&nbsp;&nbsp;&nbsp;&nbsp; {accDetails?.ccy && accDetails?.bal ? `${accDetails.ccy} ${accDetails.bal}` : '请先查询账号信息'}</font><p />
                    <font face="Arial Black" size="2">&nbsp;&nbsp;&nbsp;&nbsp; </font>
                </td>
            </tr>
        </div>
    </table>
</div>

如果你的项目不支持可选链语法，把accDetails?.fullname替换为accDetails && accDetails.fullname即可正常使用。

内容的提问来源于stack exchange，提问作者MikeBlue