时间戳

首页 > 解决方案 > ComponentDidUpdate 触发多次而不是每次更新一次

javascript - ComponentDidUpdate 触发多次而不是每次更新一次

问题描述

我的组件正在根据用户执行更改之前的结果执行计算，之后，由于某种原因，该组件似乎多次运行该函数，而不是每次更改一次，这导致结果不准确。关于可能导致问题的任何建议？

这是代码：

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

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

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});
    }

    componentDidMount(){
        this.initiateValue();
    }

    componentDidUpdate(_prevProps, prevState){
        if (this.state.SubtotalValue !== prevState.SubtotalValue){
            let total = this.props.liquidTotal;
            if(this.props.label == 'Kreditlinien in TEUR'){
                total = total + prevState.SubtotalValue - this.state.SubtotalValue;
            } else {
                total = total - prevState.SubtotalValue + this.state.SubtotalValue;
            }
            this.props.getValue(total);
        }
    }

    public render(): React.ReactElement<ILiquidiManagerProps> {
        console.log(this.props.liquidTotal + "Subtotal");
        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.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")}</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>
        );
    }
}

标签： javascriptreactjs

解决方案

所以我发现了问题。getText 函数正在从另一个组件获取值，该组件初始为 0，但随后从另一个组件接收另一个值。延迟导致状态更新，并且由于值不同，因此 componentDidUpdate 在初始化时触发。

我在另一个组件的 ComponentWillMount 上使用了异步函数，这似乎解决了这个问题：

async componentWillMount(): Promise<void> {
    this.LiquidTotal();
}

推荐阅读