React無法讀取屬性。它是否是錯誤的綁定？

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，我想你在使用它之前已經定義了它。