在reactjs中循环迭代5次。

Question

我正在学习reactjs，我创建了一个用于社会维护计费的模块，在这个模块中，我想获取所有社团成员的名称和更改，我想申请到所有这些成员。我已经获取了所有这些细节，但是现在我想要计算每个users.But的总费用。我的问题是，我的循环迭代了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>
    )
}

输出：

​

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

​

Answer 1

问题：

1-在循环中执行setState，这不是一个好主意/模式，首先做所有的计算，然后使用setState更新状态值。始终尝试在函数中使用setState一次，在函数结束时。

2-这一行打印5次的原因是，您在map中使用嵌套循环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});
}