有什么方法可以从后端 MongoDB 中获取数据并在前端 react JS 中显示？答案

【问题标题】：Is there any method to fetch the data from back-end MongoDB and show at front-end react JS?有什么方法可以从后端 MongoDB 中获取数据并在前端 react JS 中显示？
【发布时间】：2021-09-10 17:45:49
【问题描述】：

我正在尝试将我的后端数据从 mongoDB 显示到前端并计算特定成员的余额代码如下：

export default function BuySellInfo() {
 const[xnaLogData,setXnaLogData]=useState([]);
    const [balance,setBalance]=useState(0);
  const calBal =()=>{
    var sum = xnaLogData.reduce(function(prev, current) {
      return prev + +current.balance
    }, 0);
    setBalance(sum);
  }

useEffect(() => {
  async function fetchXna () {
    const response = await fetch('/xnaloginforoute');
    const json = await response.json();
    setXnaLogData(json.xnacomp);
    console.log(json.xnacomp)
    console.log(xnaLogData);
}
    fetchXna();
    calBal();
},[]);


  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>

上述组件将从后端路由获取数据。尽管每当我发送请求时，邮递员的路线都可以正常工作，但它在前端显示错误。有时会删除错误（这意味着数据已完美获取），但在第一次尝试时，在注释或取消注释代码行后未获取数据：{/* <td>{xnaLogData[0].memberno}</td> */} 从上面的组件获取 api 工作。我无法解决这个问题。后端路由是：

router.get('/xnaloginforoute', async (req, res) => {
  const xnacomp=await xnaLog.find({})
  res.json({xnacomp});
});

我对这个问题的看法是，在前端的第一次尝试中没有获取响应，但通过 Postman 可以正常工作。但我无法解决这个问题。以及如何获取数据或获取是：

首先点击BuySell按钮打开这个组件它将显示错误 TypeError: Cannot read properties of undefined (reading 'memberno') 因为我没有注释掉 { <td>{xnaLogData[0].memberno}</td> } 行但随后我注释了{/* <td>{xnaLogData[0].memberno}</td> */} 行，表格将出现没有值，因为代码行被注释掉了然后我取消注释{ <td>{xnaLogData[0].memberno}</td> } 行，数据将被完美提取并存储在 usestate 中

我无法理解这段代码中的内容。

【问题讨论】：

标签： node.js reactjs mongodb express

【解决方案1】：

将此行放在您的useEffect 下方和return 上方：

if (!xnaLogData.length) {
  return null;
}

您正在为您的表获取在组件初始呈现时不可用的数据，因此 xnaLogData[0] 是 undefined

【讨论】：