Javascript 通过在react.js中单击增加数量

我正在

react.js

中编写一个

Product

组件，我想在单击该项目时增加实际产品的

incontatcount

值

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);

import React，{PropTypes}来自'React'；
从“同构样式加载程序/lib/withStyles”导入withStyles；
从“/Product.css”导入s；
var NumberFormat=require（'react-number-format'）；
类产品扩展了React.Component{
addToCart（产品）{
console.log（product.incontcount）；
product.instantCount++；
}
render（）{
const product=this.props.data；
product.inventCount=product.inventCount | | 0；
返回(
{product.name}
{product.instantCount}
);
}
}
使用样式导出默认值（产品）；

---

在

console.log

中，值正在增加，但它没有呈现到

DOM

，我总是在浏览器中将

0

视为

incontocount

值。

您不能像这样使用代码。要增加计数器，应使用

this.state.counter

，并在组件中使用此变量。因为每次更改

this.state

时，组件都会自动重新渲染并获取新的

this.state

。如果您只是手动更改值，那么组件不会重新呈现，并且您永远不会在页面上看到更改后的值。 但是不要忘记初始化

this.state={counter:0}

首先在方法

getInitialState（）

中，如下所示：

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

---

并将其用于

render

方法或任何类似

this.state.counter的方法中

您不能像这样使用代码。要增加计数器，应使用

this.state.counter

，并在组件中使用此变量。因为每次更改

this.state

时，组件都会自动重新渲染并获取新的

this.state

。如果您只是手动更改值，那么组件不会重新呈现，并且您永远不会在页面上看到更改后的值。 但是不要忘记初始化

this.state={counter:0}

首先在方法

getInitialState（）

中，如下所示：

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

---

并将其用于

render

方法或类似于

this.state.counter的任何方法中
每次从道具获取产品时，道具是不可变的，并且永远不会更新，您有两个选项：

使用新计数更新父级，并将其状态设置为“更新产品”，这将使用新产品道具重新呈现子级，并具有新计数
使用来自父级的道具初始化状态，然后控制产品的状态，在这种情况下，需要在更新要重新渲染的计数后将状态设置为新产品
每次从道具获取产品时，道具是不可变的，并且永远不会更新，这里有两个选项：

使用新计数更新父级，并将其状态设置为“更新产品”，这将使用新产品道具重新呈现子级，并具有新计数
使用来自父级的道具初始化状态，然后控制产品的状态，在这种情况下，需要在更新要重新渲染的计数后将状态设置为新产品
问题是您每次都在渲染中重新初始化产品，可能的解决方案有：

使用新计数更新父组件，将函数从父组件传递给子组件
在父组件中：

<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);
}

二,。将处于状态的产品存储在子组件上，如下所示：

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);

import React，{PropTypes}来自'React'；
从“同构样式加载程序/lib/withStyles”导入withStyles；
从“/Product.css”导入s；
var NumberFormat=require（'react-number-format'）；
类产品扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
产品：道具数据
};
}  
addToCart（）{
让product=this.state.product；
product.inventCount=product.inventCount？product.inventCount+1:1；
this.setState（{product}）；
} 
render（）{
返回(
{this.state.product.name}
{this.state.product.inventCount}
);
}
}
使用样式导出默认值（产品）；
问题是您每次都在渲染中重新初始化产品，可能的解决方案有：

使用新计数更新父组件，将函数从父组件传递给子组件
在父组件中：

<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);
}

二,。将处于状态的产品存储在子组件上，如下所示：

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);

import React，{PropTypes}来自'React'；
从“同构样式加载程序/lib/withStyles”导入withStyles；
从“/Product.css”导入s；
var NumberFormat=require（'react-number-format'）；
类产品扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
产品：道具数据
};
}  
addToCart（）{
让product=this.state.product；
product.inventCount=product.inventCount？product.inventCount+1:1；
this.setState（{product}）；
} 
render（）{
返回(
{this.state.product.name}
{this.state.product.inventCount}
);
}
}
使用样式导出默认值（产品）；
他正在使用es6，getInitialState（）将不起作用，他必须使用构造函数。他正在使用es6，getInitialState（）将不起作用，他必须使用构造函数。像这样更新子级中的计数
product.inventCount++不正确这应该移动到父级
产品
应该是不可变的，不能更新。我不知道他的产品结构，我只是告诉了他所有可能解决他所面临问题的方法。如果他只需要子组件中的数据，则无需再次将其传递给父组件