我正在尝试创建一个函数,其中当用户单击添加按钮className = "addButton"时;他们将添加从父类this.props.products中获取的.json获取的价格值。

我的问题是>当我尝试渲染包含“添加”按钮和与产品相关的其他一些东西的ProductSquare组件时,它将无限循环渲染。

我还选择性地针对具有唯一product._id的产品



import React, { Component } from "react";

//css classes
import "./cssForComponents/ProductSquare.css";
import AddButton from "./addButton.js";

class ProductSquare extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoaded: true,
      sum: 0
    };

    this.onClickHandlerForAdd = this.onClickHandlerForAdd.bind(this);
    this.getData = this.getData.bind(this);
  }

  onClickHandlerForAdd(price) {
    this.setState({ sum: price });
  }

  getData() {
    return this.props.products.map(
      (product) =>
        product._id === "5b77587c570ee12e768704da" ? (
          <div className="ProductSquare" key={product.index}>
            <button
              className="AddButton"
              onClick={this.onClickHandlerForAdd(product.price)}
            >
              {product.price}
            </button>

            <button className="InfoButton">{product.about}</button>
          </div>
        ) : (
          console.log("Results were not loaded")
        )
    );
  }

  render() {
    console.log(this.state.sum);

    return this.getData();
  }
}

export default ProductSquare;

最佳答案

实际上,在执行渲染时会调用onClick处理程序。因此状态正在改变,因此又进行了渲染等。应为:

onClick={() => this.onClickHandlerForAdd(product.price)}


这样,onClick处理程序将注册一个单击时要调用的函数

10-01 16:29
查看更多