在React.js中的JSON中显示值的总和

Question

我有这个json，我想在React.js的组件中查看available_funds的总和。 这有可能吗？ 我可以要求查看此示例吗？ 因为我做不到。

[
  {
    id: 1,
    id_owner: 1,
    account_bill: 123456789,
    available_funds: 100
  },
  {
    id: 2,
    id_owner: 1,
    account_bill: 111111111,
    available_funds: 20
  }
]

React.js组件：

class AvailableFunds extends Component {
  constructor() {
    super();
    this.state = {
      availableFunds: '',
      isLoading: true,
    };
  }

  componentDidMount() {
    axios
      .get('http://localhost:3000/api/bills/1')
      .then(({ data }) => {
        console.log(data);
        this.setState({
          availableFunds: data.available_funds,
          isLoading: false
        });
      })
      .catch(err => {});
  }

...？

Answer 1

如果您的数据是对象数组，则可以使用reduce求和：

data.reduce((accumulator, currentValue) => accumulator + currentValue.available_funds, 0)

Answer 2

尝试这个：

componentDidMount() {
    axios
        .get('http://localhost:3000/api/bills/1')
        .then(({ data }) => {
        var sum = 0;
        if(typeof data == 'object'){
            data.forEach(funds => {
                sum += parseFloat(funds.available_funds);
            });
        }
        this.setState({
            availableFunds: sum,
            isLoading: false
        });
    })
    .catch(err => {});
}