尝试对数据库数组中的值求和，在 React 前端返回“NaN”错误

Question

I'm attempting to take figures from an array of objects in my React frontend, MongoDB Database, and sum them together.

To do this, I have built a 'reduce' function, which I'm using on my state.

const sumBalance = this.state.debts.reduce(function(previousValue, currentValue) {
          return (
            previousValue.balance + currentValue.balance
          )
        }, 0)

However, every time I try to access my app now I get a 'NaN' where the 'sumBalance' function is rendering.

In case it's not clear, I am attempting to take the 'balance' value from each of my database objects, and sum them together. I then want to render that in this component:

<IndividualDebtSummary balance={sumBalance} monthly="£430"/>

Here's my MongoDB schema to be totally clear - I want to take the 'balance' from this, which I thought would be this.state.debts.balance, and so previousValue.balance in my function:

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

Here's my full component code:

class IndividualDebts extends Component {
  constructor(props) {
    super(props)

    this.state = {
      debts: []
    }

  }

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

  render() {

        const sumBalance = this.state.debts.reduce(function(previousValue, currentValue) {
          return (
            previousValue.balance + currentValue.balance
          )
        }, 0)

    return (
      <div>

            <IndividualDebtSummary balance={sumBalance} monthly="£430"/>

    </div>
        )
      }
    }

For reference - I have a separate 'fetchDebts' function and they render using 'map' - but I've not included them to keep the code a bit shorter.

Thanks, any help would be great.

Answer 1

That happens because on the first render your array is actually empty. Try to render the data only if the debts array has some values, like:

return (
      <div>

            {this.state.debts.length > 0 && <IndividualDebtSummary balance={sumBalance} monthly="£430"/>}

    </div>