Question

我正在尝试使用React构建订单列表/表单。但是，点击其中一个产品后会发生错误：

无法读取未定义
的属性'价格'

  13 | totalSum() {
  14 |  this.setState({
> 15 |      total: this.state.total + this.product.price
  16 |  })
  17 | }

构造函数中绑定错误吗？如果是的话，你能解释一下为什么吗？

我的代码：

import React, { Component } from 'react';
import Summary from './summary';

class ShoppingCard extends Component {
    constructor(props) {
        super(props);
        this.state = {
            total: 0
        }
        this.totalSum = this.totalSum.bind(this);
    }

    totalSum() {
        this.setState = {
            total: this.state.total + this.product.price
        }
    }

  render() {
    return (
      <div>
        {
            products.map((product) => {
                return (
                    <ul>
                        <li onClick={this.totalSum.bind(this)}>{product.name} {product.price}$</li>
                    </ul>
                );
            })
        }
        <Summary totalSum={this.totalSum}></Summary>
      </div>
    );
  }
}

var products = [
    {
        name: "Product 1",
        price: 250
    },
    {
        name: "Product 2",
        price: 70
    },
    {
        name: "Product 3",
        price: 140
    },
    {
        name: "Product 4",
        price: 640
    },
    {
        name: "Product 5",
        proce: 290
    },
]
export default ShoppingCard;

Answer 1

setState是一个函数，而不是您为其赋值

的变量

您的代码中未定义this.product，您需要将价格从地图函数传递给totalSum函数，如

 totalSum(price) {
    this.setState({
        total: this.state.total + price
    })
 }

渲染功能：

 <div>
    {
        products.map((product) => {
            return (
                <ul>
                    <li onClick={this.totalSum.bind(this, product.price)}>{product.name} {product.price}$</li>
                </ul>
            );
        })
    }
    <Summary totalSum={this.totalSum}></Summary>
  </div>

P.S。此外，我还没有看到地图功能中定义的products，我想您在使用之前已对其进行了定义。

React无法读取属性。绑定是错误的吗？

1 个答案: