Javascript 为什么setState会导致我的React应用程序进入无限循环？

我正在尝试呈现以下组件，该组件应该获取一些帐户级别值的值，并在div中呈现小计

import * as React from 'react';
import { ILiquidiManagerProps } from './ILiquidiManagerProps';
import {AccountValue} from './AccountFields';
import {LiquidTEUR} from './DummyContent';

interface SubtotalState {
    Account?: any,
    SubtotalValue?: any
  }

export default class SubtotalValues extends React.Component<ILiquidiManagerProps, SubtotalState> {
    public constructor(props: ILiquidiManagerProps) {
        super(props);
        this.state = {
            Account: LiquidTEUR.Subcategories.find(item => item.Name == this.props.label),
            SubtotalValue: 0
        }
    }
    
    private getText = data => {
        this.setState({SubtotalValue: data});
    }

    private initiateValue = () => {
        let Account = this.state.Account;
        let subtotal = 0;
        Account.Accounts.map((item) => {
            subtotal += item.Value;
        })
        this.setState({SubtotalValue: subtotal});
    }

    public render(): React.ReactElement<ILiquidiManagerProps> {
        this.initiateValue();
        return(
            <React.Fragment>
            <a className="collapsible" href="#">
                <div 
                    className={`p-2 text-right value ` + this.props.bgColor + ` font-weight-bold ` + this.props.textColor}
                    data-date={this.props.date}
                    data-name={this.props.label}
                >{this.state.SubtotalValue}</div></a>
            <div className="content hidden">
                {this.state.Account.Accounts.map((item, key) => {
                    return <AccountValue key={key} label={item.Value} getValue={this.getText} subtotal={this.state.SubtotalValue} />;
                })}
                <span className="add-pos">&nbsp;</span>
            </div>
            </React.Fragment>
        );
    }
}

import*as React from'React'；
从“/ILIquidImanagerOps”导入{ILIquidImanagerOps}；
从“./AccountFields”导入{AccountValue}；
从“/DummyContent”导入{LiquidTEUR}；
接口小计状态{
账户？：任何，
小计值？：是否有
}
导出默认类小计值扩展React.Component{
公共构造函数（道具：iLiquidImanagerOps）{
超级（道具）；
此.state={
帐户：LiquidTEUR.Subcategories.find（item=>item.Name==this.props.label），
小计值：0
}
}
private getText=data=>{
this.setState（{SubtotalValue:data}）；
}
私有启动器值=（）=>{
让Account=this.state.Account；
小计=0；
Account.Accounts.map（（项目）=>{
小计+=项目价值；
})
this.setState（{SubtotalValue:subtotal}）；
}
public render（）：React.ReactElement{
this.initialevalue（）；
返回(
{this.state.Account.Accounts.map（（项，键）=>{
返回；
})}
);
}
}

这是它生成的错误消息

未捕获（承诺中）不变冲突：超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环

我尝试了几种不同的方法来设置小计的状态，但我似乎总是得到相同的错误，我不确定我在哪里造成了无限循环

当组件呈现时，调用this.initialevalue

initiateValue

设置状态

设置状态将触发渲染

转到1

您可能想从调用

initialevalue

---

（或者切换到编写函数组件并将其放入

useffect

钩子中）。

在使用

this.initialevalue（）时，不应在渲染方法中使用
setState（）

因为正如您所知，无论何时调用
setState（）
，都会发生重新渲染，这就是它走向无限的原因

如果要在
componentDidMount（）或
useffect（）内初始化数据调用

要了解更多信息，请参阅