react.jsをクリックして数を増やす

Question

Productコンポーネントをreact.jsに書いています。アイテムをクリックすると、inCartCountの値を増やしたいと思います。 console.logで

import React, { PropTypes } from 'react'; 
import withStyles from 'isomorphic-style-loader/lib/withStyles'; 
import s from './Product.css'; 

var NumberFormat = require('react-number-format'); 
class Product extends React.Component { 

    addToCart(product) { 
     console.log(product.inCartCount); 
     product.inCartCount++; 
    } 

    render() { 

     const product = this.props.data; 

     product.inCartCount = product.inCartCount || 0; 

     return (
      <div onClick={this.addToCart.bind(this, product)}> 
       <h3>{product.name}</h3> 
       <NumberFormat value={product.price} displayType={'text'} thousandSeparator={true} suffix={' Ft'}/> 
       <span>{product.inCartCount}</span> 
      </div> 
     ); 
    } 
} 

export default withStyles(s)(Product); 

値が増加しているが、それはDOMにレンダリングされていない、私は常にブラウザで0inCartCountとして値を参照してください。

Answer 1

-render問題は、あなたがするたびに、可能な解決策をレンダリングで製品を再初期化されている。

1. 更新し、新たなカウントが親コンポーネント、親から子への関数を渡します。親コンポーネントで

：子コンポーネントで

<Product 
    updateProduct={this.updateProduct.bind(this)} 
    data={this.state.data}  
/> 

updateProduct(value){ 
    this.setState({data:value}); 
} 

：

addToCart(product) { 
    console.log(product.inCartCount); 
    product.inCartCount++; 
    this.props.updateProduct(product); 
} 

2店、このような子コンポーネントの状態の製品：彼が使用している

import React, { PropTypes } from 'react'; 
import withStyles from 'isomorphic-style-loader/lib/withStyles'; 
import s from './Product.css'; 

var NumberFormat = require('react-number-format'); 

class Product extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     product: props.data 
     }; 
    } 

    addToCart() { 
     let product = this.state.product; 
     product.inCartCount = product.inCartCount ? product.inCartCount+1 : 1; 
     this.setState({product}); 
    } 

    render() { 
     return (
      <div onClick={this.addToCart.bind(this)}> 
       <h3>{this.state.product.name}</h3> 
       <NumberFormat value={this.state.product.price} displayType={'text'} thousandSeparator={true} suffix={' Ft'}/> 
       <span>{this.state.product.inCartCount}</span> 
      </div> 
     ); 
    } 
} 

export default withStyles(s)(Product); 

Answer 2

あなたのようにコードを使用することはできません。カウンターをインクリメントするには、this.state.counterを使用し、この変数をコンポーネントに使用する必要があります。 this.stateが変更されるたびに、コンポーネントは自動的に再レン​​ダリングされ、新しいthis.stateを取ります。どのように手動で値を変更すれば、コンポーネントは再レンダリングされず、ページで変更された値が決して表示されません。 しかし、この方法このようgetInitialState()で最初にthis.state = {counter: 0};をinitalizingすることを忘れないでください：あなたが製品にから毎回フェッチ

getInitialState() { 
    return { counter: 0 }; 
    } 

とrender方法にまたはthis.state.counter

Answer 3

などの任意のメソッドにそれを使用します不変で、更新されることはありません小道具は、あなたはここで2つのオプションがあります：新しいカウントが

1. 親を更新すると、製品を更新するために、その状態を設定し、それが再び再ます新しい製品小道具を持っている子供に新しい数がある
2. 親からの小道具で状態を初期化してから、製品の状態を制御しています。この場合、カウントを更新して新しい製品に状態を設定する必要があります