React前端获取MongoDB后端数据并展示，首次渲染访问数组元素报错如何解决？

问题根源 #

• 第一：React组件首次渲染优先级高于异步请求返回。你初始化xnaLogData为空数组[]，首次渲染时直接访问xnaLogData[0].memberno，xnaLogData[0]为undefined，自然抛出读取属性失败的错误。
• 第二：fetchXna是异步函数，你在useEffect里调用完fetchXna()立刻执行calBal()，此时请求还没返回，xnaLogData还是空数组，计算出的余额也是错误的，且不会自动重新计算。
• 第三：你注释掉报错行后组件能正常渲染，此时异步请求返回触发重渲染，xnaLogData已经有值了，再取消注释行就不会报错，这就是你复现步骤里现象的原因，和后端接口无关，Postman测试正常也验证了这点。

修复方案 #

1. 核心逻辑调整说明 #

要么用可选链?.访问属性避免空值报错，要么在数组长度为0的时候显示加载状态，同时把余额计算改成直接从数组派生，不需要单独维护state和手动触发计算，逻辑更简洁也不会出现不同步问题。

修复后的完整代码 #

import { useState, useEffect } from 'react';

export default function BuySellInfo() {
  const [xnaLogData, setXnaLogData] = useState([]);
  // 余额直接从xnaLogData派生，数据更新后自动重新计算
  const balance = xnaLogData.reduce((prev, current) => prev + Number(current.balance), 0);

  useEffect(() => {
    async function fetchXna () {
      try {
        const response = await fetch('/xnaloginforoute');
        const json = await response.json();
        setXnaLogData(json.xnacomp);
      } catch (err) {
        console.error('拉取数据失败:', err);
      }
    }
    fetchXna();
  }, []);

  // 数据未加载完成时显示加载状态，避免空值报错
  if (xnaLogData.length === 0) {
    return <div style={{marginLeft: '3%', marginTop: '20px'}}>数据加载中...</div>
  }

  return (
    <div>
      <table className="table" style={{width:"30%",marginLeft:"3%"}}>
        <tbody>
          <h2 style={{textAlign:'center'}}>  Buy & Sell </h2>
          <tr>
            <td>Member No</td>
            <td>{xnaLogData[0].memberno}</td> 
          </tr>
          <tr>
            <td>XNA Balance</td>
            <td>{balance}</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

可选兼容写法 #

如果不想加加载判断，也可以把属性访问的行改成如下写法，没有值的时候显示横杠占位，也不会触发报错：

<td>{xnaLogData[0]?.memberno ?? '-'}</td>

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