Javascript 安装期间，计算父组件中多个子组件的值之和

我目前正在学习JS+ReactJS，有一个问题我自己无法解决。 我有一个名为“AssetOverview”的父组件，它应该通过使用传递的资产对象this.props.assetList来显示多个名为“Asset”的子组件。在每个资产组成部分中，都有一个起始值和一个预期利率。目前，我将当前金额与20年的时间进行复利，以获得未来金额。这最初是在子组件的构造函数中完成的，但我还有一个用于进一步计算的函数

现在，我想在资产概览中显示所有资产组件的未来总金额。不幸的是，这不起作用

import React from 'react';
import Asset from '../Asset/Asset';


class AssetOverview extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            total: 0
        }
        this.updateTotal = this.updateTotal.bind(this);
    }

    updateTotal(substract, add) {
        const prevValue = this.state.total;
        this.setState(
            { total: (prevValue - substract + add) }
        );
    }

    render() {
        return (
            <div className="AssetOverview">
                <h3>TOTAL: {(this.state.total).toFixed(0)}</h3>
                <div className="AssetList">
                    {
                        this.props.assetList.map (asset => {
                            return <Asset asset={asset} updateTotal={this.updateTotal} />
                        })
                    }
                </div>
            </div>
        )
     }

}
        
export default AssetOverview;

另一个文件：

import React from 'react';

const years = 20;

class Asset extends React.Component {

    constructor(props) {
        super(props);
        this.state = { 
            expectedInterestRate: this.props.asset.expectedInterestRate,
            futureTotal: (this.props.asset.startingValue * Math.pow((1+ (this.props.asset.expectedInterestRate/100)),years))
        };

        this.compoundIt = this.compoundIt.bind(this);

        this.props.updateTotal(0, this.state.futureTotal)
        
               
    }
  


    compoundIt(rate) {
        const prevValue = this.state.futureTotal;
        const newValue = this.props.asset.startingValue * Math.pow((1+ (rate/100)),years);
        this.setState(
            { futureTotal: newValue }
        )
        this.props.updateTotal(prevValue, newValue);
    } 

    

    render() {
        return (
            <div>
                <tr>
                    <table className="asset-container">
                        <tr>
                            <td>Name: </td>
                            <td>{this.props.asset.name}</td>
                            </tr>
                        <tr>
                            <td>Start: </td>
                            <td>{this.props.asset.startingValue}</td>
                        </tr>
                        <tr>    
                            <td>Zukunft: </td>
                            <td>{(this.state.futureTotal).toFixed(0)}</td>
                        </tr>
                        <tr>
                            <td>Zinsatz: </td>
                            <td>{(this.state.expectedInterestRate).toFixed(1)}</td>
                    </table>
                </tr>
            </div>
        )
  }
}

export default Asset;

从我到目前为止所做的尝试来看，这似乎只起了一次作用。如果我有多个资产组件，它仍然可以工作-但只有一次

我希望你能帮忙

非常感谢，复活节快乐，请保持安全。 尼科