Question

我做了一个map（）循环遍历一个数组，并且对于循环中的每次迭代我都在为我的变量添加一个值（var total = 0最初），所以在循环结束时我的总变量为非空值。我想将此值分配给我的状态（totPrice）。这是我的组成部分：

class Items extends Component {

    constructor(props){
    super(props);
    //console.log(props)
    var ob=props.items;
    var tot=0;
    ob.map((item) => {tot+=item.Cost});

    this.state={
        totPrice: tot,
        check: true
    }
}

handlePriceChange(cost){
    //console.log(event)
    this.setState({check:!this.state.check},function(){
        if(this.state.check== false){
            this.setState({totPrice:this.state.totPrice -=cost})
        }
        else{
            this.setState({totPrice:this.state.totPrice +=cost})
        }
    });

}
    render() {
        const obj=this.props.items;
        var total=0;



 return (
            <div className="container">
               <a href="/products">Continue shopping</a>
               {
                obj.map((item,i) => {
                    total+=item.Cost;
                    return <li key={i}><input type="checkbox" defaultChecked={this.state.check}  onChange={()=>this.handlePriceChange(item.Cost)}/> <span>{item.Name}</span>  <span>{item.Cost}</span></li>
                })

               }
                <h3>Total price:{this.state.totPrice}</h3>
            </div>
        );

    }
}
export default Items;

我在map（）之后尝试了this.setState({totPrice:total})，但这给了我一个错误。尝试在componentDidMount（）中，不知道总变量。请帮忙......

Answer 1

计算构造函数中的总价格变化

constructor() {
    super();
    this.state={
        totPrice: 0,
        check: true
    }
}

到

constructor(props){
    super(props);
    // calculate the total price here, using Javascript's Array reduce()
    this.state={
        totPrice: 0,
        check: true
    }
}

然后，使用索引

调用handlePriceChange

return (
  <li key={i}>
    <input type="checkbox" 
      defaultChecked={this.state.check}
      onChange={ () => this.handlePriceChange.bind(this)(i) }
    />
    <span>{item.Name}
      </span>  <span>
    {item.Cost}</span>
  </li>
);

最后，在handlePriceChange()中，根据更改前的检查值，从总价格中添加或减去商品的价格。

在map（）后反应setstate

1 个答案: