使用 React Hooks 计算状态值的总和

Question

我正在使用 React Hooks 在状态中存储数据。我想创建一个函数来计算值的总和。我尝试了一些方法，但它不起作用。

这是我的具有“totalIncome”功能的组件：

import { UidContext } from "../components/AppContext"
import React, { useContext, useEffect, useState } from "react"
import axios from "axios"

export default function Balance() {
    const uid = useContext(UidContext)
    const [userWalletIncomes, setUserWalletIncomes] = useState('')
    const [userWalletFees, setUserWalletFees] = useState('')
    const [formIncomes, setformIncomes] = useState(false)

    useEffect(() => {
        if (uid !== null) {
            axios.get(`${process.env.REACT_APP_API_URL}api/balance/${uid}`)
                .then((res) => {
                    setUserWalletIncomes(res.data[0].incomes)
                    setUserWalletFees(res.data[0].fees)
                })
        }
    }, [uid])

    const totalIncome = () => {
        Object.entries(userWalletIncomes).map(([key, value]) => {
            let total = 0
            console.log(value)
            for (let i = 0; i < value.length; i++) {
                total += value[i]
            }
            return total
        })
    }

    return (
            <section className="border my-2 w-max md:w-11/12 mx-auto text-center">
                <h1 className="text-3xl my-5">Solde</h1>
                <div className="text-left mx-auto flex">
                    <p className="w-32 border p-1">Montant des revenus</p>
                    <p className="w-32 border p-1">{totalIncome()}</p>
                </div>
            </section>
    )
}

console.log(值) returns :

1500 Balance.js:42 
640 Balance.js:42 
90 Balance.js:42 
1500 Balance.js:42 
640 Balance.js:42 
90 Balance.js:42

有什么想法吗？谢谢

Answer 1

根据您的日志显示，我希望该函数能够像这样工作：

const totalIncome = () => {
    let total = 0
    Object.entries(userWalletIncomes).forEach(([key, value]) => {
        total += value
    })
    return total
}

Answer 2

看来你很接近。您正在记录 value 并且它显然不是数组，因此没有 length 属性并且您无法对其进行迭代。

我建议对对象的值使用 array.reduce 并将它们与计算的总数相加。

const totalIncome = () => {
  return Object.values(userWalletIncomes).reduce((total, value) => total + value, 0)
}

除此之外，您需要为 userWalletIncomes 提供有效的初始状态，即它需要是一个对象而不是空字符串。这样 totalIncome 函数可以在初始状态下正常工作，直到数据被提取 and/or 更新。

const [userWalletIncomes, setUserWalletIncomes] = useState({});

使用 React Hooks 计算状态值的总和

Calculate sum of values in state with React Hooks

javascript

calculator

reactjs

react-hooks