Question

我正在Product中撰写react.js组件，并且我希望在点击该项目时增加实际产品的inCartCount值。

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

<{1>} console.log中的值正在增加，但未呈现给DOM，我始终在浏览器中看到0为inCartCount值。

Answer 1

您不能像使用代码那样使用代码。要递增计数器，您应该使用command并将此变量用于您的组件。因为每次from tkinter import Tk, Canvas, Button def move(): canvas.move(circle, 0, 10) root.after(1000, move) # the second argument as to be a function, not move() root = Tk() canvas = Canvas(root) canvas.pack(fill='both', expand=True) circle = canvas.create_oval(10,10,30,30, fill='red') Button(root, text="Start", command=move).pack() root.mainloop()更改时，您的组件都会自动重新呈现并使用新的this.state.counter。如果您只是手动更改值，那么组件不会重新渲染，您永远不会在页面上看到更改的值。但是不要忘记在方法this.state中首先this.state初始化{赞成这样：}

this.state = {counter: 0};

并将其用于getInitialState()方法或getInitialState() { return { counter: 0 }; }

等任何方法

Answer 2

您每次从不可变的道具获取产品并且永远不会更新，您有2个选项：

使用新计数更新父级并将其状态设置为更新产品，并使用新产品道具重新呈现子级并重新计算
使用来自父级的道具初始化状态，然后您控制产品的状态，在这种情况下，您需要在更新计数以重新渲染后将状态设置为新产品

Answer 3

问题是你每次都在渲染中重新初始化产品，可能的解决方案：

使用新计数更新父组件，将函数从父级传递给子级。

在父组件中：

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

单击react.js增加数量

3 个答案: