reactjs - 如何遍历 MongoDB 条目，总结条目并呈现在 React 前端

Question

我想遍历我的 MongoDB 数据库中的不同条目，从这些条目的特定方面提取值/数字，将它们全部汇总并通过道具将其呈现在我的 React 前端。

为了希望更好地解释，这是我的代码：

我的 MongoDB 架构：

const SubmitDebtSchema = new Schema ({
  creditCard: String,
  personalLoan: String,
  provider: String,
  balance: Number,
  limit: Number,
  monthly: Number,
  interest: Number,
  borrowed: Number
});

我的 Fetch API 文件：

  module.exports = async (req, res) => {
  const submitDebts = await SubmitDebt.find({});
  return res.status(200).json(submitDebts);
};

我想在哪里显示从我的数据库中提取的数字：

<IndividualDebtSummary balance="£2600" monthly="£430"/>

React 中的“获取”代码：

 this.state = {
      debts: []
    }

     componentDidMount() {
        axios.get("/api/fetchDebtCards")
        .then((response) => {
          this.setState({ debts: response.data })
        })
        .catch(e => {
          console.log(e)
        })
      }

我希望这个“摘要”组件将存储从我的数据库中提取的数字，然后作为道具呈现。

为了进一步解释，例如，如果我的数据库中有三个条目：

• 第 1 项 - 余额 = 1300 英镑，每月 = 110 英镑
• 第 2 项 - 余额 = 1200 英镑，每月 = 160 英镑
• 第 3 项 - 余额 = 2000 英镑，每月 = 180 英镑

这三个条目的余额总和为 4500 英镑，每月为 450 英镑。

这意味着组件中的道具将如下所示：

 <IndividualDebtSummary balance="£4500" monthly="£450"/>

但显然不是硬编码它们，我希望它是动态的并随数据库更新。因此，如果添加另一个条目，则数字会发生变化等。

我怀疑最有效的方法是在我的 React 代码中使用 'fetch' 函数，创建一个循环遍历条目和总和的变量，然后在我的 return 语句中呈现它。

所以如下：

const sumDebts = this.state.debts.map (debt => {

firstFunction = () => {

forEach(debt.balance)......

}

secondFunction = () => {

forEach(debt.monthly)...

}

return (

<IndividualDebtSummary balance={firstFunction} monthly={secondFunction} />

}

但是，我不知道如何最好地做到这一点。谁能比我聪明地指出如何最好地做到这一点的正确方向？

标签： reactjsmongodb