如何对 Axios 和 reactjs 响应中特定键的值求和答案

【问题标题】：How to sum value of specific keys in an Axios and reactjs Response如何对 Axios 和 reactjs 响应中特定键的值求和
【发布时间】：2022-01-20 04:14:01
【问题描述】：

嗨，我正在使用 react 和 axios，我想在 reactjs 中对我从 api 获得的值求和。我想对数组中的 TotalVolume、TotalVolume、totalSell 和 totalBuy 求和。

我得到了什么

{
    "TotalTrade": 2,
    "TotalVolume": 200,
    "totalSell": 0,
    "totalBuy": 2
},
{
    "TotalTrade": 2,
    "TotalVolume": 200,
    "totalSell": 1,
    "totalBuy": 1
},

我想要什么

{
    "TotalTrade": 4,
    "TotalVolume": 400,
    "totalSell": 2,
    "totalBuy": 2
},

我的 Axios 代码

  componentDidMount() {
    this.getData()
  };

  getData() {
    axios.get(`https://api-test-demo.com/performance/get/all/orders/details/between/dates?page_from=0&page_to=100&date_from=&date_to=`)
      .then(res => {
        const faq = res.data;
        this.setState({ faq });
      })
  };

在此处显示数据

        {this.state.faq &&
          <div className="faqListC">
            {this.state.faq.map(faqList => (
              <div className="faqList">
                <div className="qNum">Question: <b>{faqList.ClientInv19Id}</b>
                </div>

                <div className="aNum">
                  <span className="ansD">Ans.: </span>
                  <div
                    className="innerF"
                    >
{faqList.ClientBowId}
                    </div>

                </div>
              </div>
            ))}

          </div>}

【问题讨论】：

您从 API 获取的这些数据，是一个带有两个 TotalTrade 对象的 json 对象，还是您从两个不同的 api 调用中获取这些数据？
来自一个 api @SampurnG
好的，那么@adrian 的答案将不起作用，让我为您写一个解决方案
不工作请帮助我@SampurnG

标签： html reactjs

【解决方案1】：

如果我们说您的数组称为结果，我们可以使用 reduce array function 将所有值加在一起，如下所示：

let resultSum = results.reduce(function(previous, current) {
  return {
    TotalTrade: previous.TotalTrade + current.TotalTrade,
    TotalVolume: previous.TotalVolume + current.TotalVolume,
    totalSell: previous.totalSell + current.totalSell,
    totalBuy: previous.totalBuy + current.totalBuy,

  }
});

【讨论】：

我需要在哪里添加此代码@adrian
我的建议是从哪里取回尚未汇总的数据。
我的数组叫 [ { "TotalTrade": 2, "TotalVolume": 200, "totalSell": 0, "totalBuy": 2 }, { "TotalTrade": 2, "TotalVolume": 200 , "totalSell": 1, "totalBuy": 1 },]
我第一次在我的代码中使用 .reduce 函数，所以我不明白我需要在哪里添加
所以如果你的数组是 [ { "TotalTrade": 2, "TotalVolume": 200, "totalSell": 0, "totalBuy": 2 }, { "TotalTrade": 2, "TotalVolume" : 200, "totalSell": 1, "totalBuy": 1 },] 被称为 "myArray" 例如，您可以使用 myArray.reduce(...

【解决方案2】：

好吧，如果我没记错的话，基本上你的 API 会返回这个数组

[
{
    "TotalTrade": 2,
    "TotalVolume": 200,
    "totalSell": 0,
    "totalBuy": 2
},
{
    "TotalTrade": 2,
    "TotalVolume": 200,
    "totalSell": 1,
    "totalBuy": 1
},
]

...以及此响应数组中的更多对象

您在这里想要做的是从响应中获取数组并通过循环运行它并手动添加所有值。您也可以根据更新组件的要求创建新的状态/变量。

//create anew state variable if you want your component to reload
const [reponseData, setResponseData] = react.useState({
    TotalTrade: 0,
    TotalVolume: 0,
    totalSell: 0,
    totalBuy: 0

})

在“Then”调用中使用它

let totalTrade = 0, totalVolume = 0, totalSell = 0, totalBuy = 0; 
let data = response.data;
for(var i=0; i< data.length ; i++) 
{
   totaltrade += data[i].TotalTrade;
   totalVolume += data[i].TotalVolume;
   totalSell += data[i].totalSell;
   totalBuy += data[i].totalBuy;
}

//after computing the actual sum values set the state for the state variable to update the component. 
//your setState method goes here, I've just used a state of my own
setResponseData({...responseData, TotalTrade : totalTrade, TotalVolume : totalVolume, totalSell : totalSell, totalBuy : totalBuy});

【讨论】：