A 버튼은 소품

Question

나는 반작용 필드에 안돼서 반응하고 좀 개념의 도움이 필요합니다. 버튼을 누를 때 즉시 버튼을 API로 업데이트하고 싶을 때마다 (클릭 할 때마다 주식이 1 씩 감소해야 함) 사용 가능한 항목 수에 대한 정보는 API에서 제공됩니다. 어떻게해야합니까? 내 구매() 메소드

buy(item){ 
    this.setState({ 
     total: this.state.total + parseFloat(item), 
     amount: this.state.amount + 1 
    }) 

    } 

    render(){ 
    const allProducts = this.state.products.map((product, i) => 
     {return <ShopItem key = {i} item = {product} buyMethod = {this.buy.bind(this)}/> 
    }) 

    return(
     <div className = "shop"> 
     <Link to = 'shop/payment'>PAY</Link> 
     <p>Total to pay:{this.state.total}</p> 
     <p>You have bought {this.state.amount} items</p> 
     {allProducts} 
     </div> 
    ) 
    } 
} 

과 shopItem 구성 요소의 구매 핸들러의

onHandleBuy(event){ 
    event.preventDefault() 
    this.props.buyMethod(this.props.item.price) 
    if(this.props.item.stock == 0){ 
     <p className = "shop">No more items available</p> 
    }else{ 
     this.props.stock - 1 
    } 
    } 

    stockFormat() { 
    let output 
    if (this.props.item.stock == 0) { 
     output = <p className = "shop">No more items available</p> 
    } else { 
     output = <p>{this.props.item.stock} items left </p> 
    } 
    return output 
    } 

    stockFormatButton() { 
    let button 
    if (this.props.item.stock == 0) { 
     button = <p className = "shop">Out of stock</p> 
    } else { 
     button = <button onClick = {this.onHandleBuy.bind(this)}>BUY</button> 
    } 
    return button 

    } 

    render(){ 
    return(
     <div className = "product"> 
     <img src = {this.props.item.url} /> 
     {this.stockFormat()} 
     {this.stockFormatButton()} 
     </div> 
    ) 
    } 

는 그것이 항목 객체처럼 보인다 너무 많은 코드

Answer 1

아니다 희망 ShopItem 구성 요소로 전달 된 구성 요소는 상위 구성 요소의 상태로 유지되는 일련의 제품에서 가져옵니다. 이 item.stock 값은 숫자의 출처입니다. 맞습니까? 따라서 값을 감소시킬 때 상위 구성 요소의 상태에서 해당 항목 값을 업데이트해야합니다. 소품 자체를 수정하려고합니다. else { this.props.stock - 1 }

모든 구성 요소는 소품과 관련하여 순수해야합니다. 즉, 구성 요소가 자체 소품을 변경할 수 없습니다.

buyMethod에서와 같은 방식으로 접근해야합니다. 상위 구성 요소의 buy 함수에 감소를 포함시킨 다음 업데이트 된 값을 ShopItem 구성 요소에 전달합니다.