Question

我正在学习reactjs并且我已经为社会维护计费创建了一个模块，在这个模块中，我想要获取所有社团成员的名称和我想要应用于所有成员的更改。我已经获取所有这些细节，但现在我想计算每个用户的收费总额。但我的问题是我的循环迭代5次我不明白为什么会发生这种情况

这是我的代码：

  handleChange(event) {
        this.setState({ value: event.target.value });
    }


countTotal(){

   this.state.chargeInputs.map((charge) => {
     var chargeTotal = 0;
    for(var val in charge){

        console.log('actual amt'+charge.charge_amt); //this lines print for 5 times

        chargeTotal +=  parseInt(charge.charge_amt);

        console.log('total'+parseInt(chargeTotal)); //this lines print for 5 times
        this.setState({ Total: chargeTotal});

    }

  });
}
  render() {

    return (
        <div className="content">
            <NavBar></NavBar>
            <div className="row">
                <div className="col-md-10">
                    <div className="card">
                        <div className="card-header card-header-icon" data-background-color="rose">
                            <i className="material-icons">receipt</i>
                        </div>
                        <div className="card-content">
                            <h4 className="card-title">Add Bill</h4>
                            <form onSubmit={this.handleSubmitFirebase}>
                                <div className="form-group label-floating is-empty">
                                    <a href="javascript:void(0)" onClick={this.appendUserInput}><i className="fa fa-plus-circle"></i>Load Users</a>
                                    <div className="room-main">
                                        <div className="online-est">
                                            <select className="room-form">
                                                {this.renderUserInput()}
                                            </select>
                                        </div>
                                    </div>
                                    <span className="material-input"></span></div>
                                <div className="form-group label-floating is-empty">
                                    <a href="javascript:void(0)" onClick={this.appendBillInput}><i className="fa fa-plus-circle"></i>Load Charges</a>
                                    <div className="room-main">
                                        <div className="online-est">
                                            {this.renderChargeInput()}
                                        </div>
                                    </div>
                                    <span className="material-input"></span></div>
                                <div className="form-group label-floating is-empty">
                                    <label className="control-label">status</label>
                                    <select className="online-est" ref={el => this.status = el}>
                                        <option value="Unpaid">Unpaid</option>
                                        <option value="Paid">Paid</option>
                                    </select>
                                    <span className="material-input"></span></div>
                                    <div className="form-group label-floating is-empty">
                                        <label className="control-label">Total</label>
                                        <input type="text" className="form-control" ref={el => this.Total = el} onClick={this.countTotal} onChange={this.handleChange} />
                                        <span className="material-input"></span></div>
                                <div className="form-group label-floating is-empty">
                                    <label className="control-label">Bill due date</label>
                                    <input type="date" className="form-control" ref={el => this.billdue = el} onChange={this.handleChange} />
                                    <span className="material-input"></span></div>
                                <div className="form-group label-floating is-empty">
                                    <label className="control-label">Bill period</label>
                                    <input type="date" className="form-control" ref={el => this.billto = el} onChange={this.handleChange} />
                                    <input type="date" className="form-control" ref={el => this.billfrom = el} onChange={this.handleChange} />
                                    <span className="material-input"></span></div>
                                <div className="form-group label-floating is-empty">
                                    <span className="material-input"></span></div>
                                <button type="submit" className="btn btn-fill btn-rose">Submit</button>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    )
}

输出：

＆＃13;

actual amt2
total2
actual amt2
total4
actual amt2
total6
actual amt2
total8
actual amt2
total10
actual amt1001
total1001
actual amt1001
total2002
actual amt1001
total3003
actual amt1001
total4004
actual amt1001
total5005
actual amt1200

total1200
actual amt1200
total2400
actual amt1200
total3600
actual amt1200
total4800
actual amt1200
total6000
actual amt200
total200
actual amt200
total400
actual amt200
total600
actual amt200
total800
actual amt200
total1000
actual amt100
total100
actual amt100
total200
actual amt100
total300
actual amt100
total400
actual amt100

＆＃13;

Answer 1

<强>的问题：

1-你正在进行setState内部循环，这不是一个好主意/模式，首先执行所有计算，然后使用setState更新状态值。在函数内部，最后一次尝试使用setState。

2-该行打印5次的原因是，您在for...in内使用嵌套循环map。

我认为for...in循环不是必需的，因为您没有在for...in正文中的任何位置使用val。而不是使用地图，最好使用forEach。

像这样写：

countTotal(){
    var chargeTotal = 0;
    this.state.chargeInputs.forEach(charge => {

        chargeTotal +=  parseInt(charge.charge_amt);
        console.log('total', parseInt(chargeTotal)); 

    })
    this.setState({ Total: chargeTotal});
}

循环在reactjs

1 个答案: