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

问题描述：

我正尝试使用React创建订单列表/表单。不过，点击后的产品之一发生错误：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;

你的情况没有'this.product'这样的东西。你是不是指'this.props.product'？ – colburton

答

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无法读取属性。它是否是错误的绑定？

相关推荐