如何解決「未捕獲的TypeError：無法讀取null的屬性'值'錯誤？

我想在React中設置一個簡單的購物車。我正在嘗試使用尺寸爲服裝項目的下拉菜單。我在我的渲染設置它，但有些錯誤，我得到：Uncaught TypeError: Cannot read property 'value' of null。如何解決「未捕獲的TypeError：無法讀取null的屬性'值'錯誤？

這是我的JSX：

import React, { Component } from 'react'; 


let cart = {price:0,item:"",size:""} 

export default class Cart extends Component { 
    handleClick(){ 
    e => { 
     cart = {price:0,item:"userselection",size:"userselection"}; 
    } 
    console.log(cart); 
    } 

    itemSelection(){ 
    let userOrder = {price:0,item:"",size:""}; 
    let userItem = ""; 
    if (userItem == "pants1") { 
     let itemPrice = 20.00; 
    } 

    } 


    render() { 
    return (
     <div className='Webshop' id='Webshop'> 
       <li> 
       <img src="./gods.jpeg" width="350" height="350"></img> 
      <button onClick={this.handleClick} id="addit">Add to cart</button> 
      <select id="size" onChange={this.change} value={this.state.value}> 
       <option value="medium">Medium</option> 
       <option value="large">Large</option> 
       <option value="x-large">X-large</option> 
      </select> 
      <img src="./gods.jpeg" width="350" height="350"></img> 
      </li> 
     </div> 
    ); 
    } 
}

是不是有什麼毛病我渲染返回一個空值？

編輯

由於這是由於Null值，我怎麼能解決這個問題得到下拉菜單？

來源

2017-04-13 feners

原因是，您沒有定義constructor和state變量，而您正在訪問this.state.value。首先定義state這樣的：

constructor(){ 
    super(); 
    this.state = {value: ''} 
}

你在錯誤的方式使用arrow function，使用這樣的：

handleClick = (e) => { 
    cart = {price:0,item:"userselection",size:"userselection"}; 
    console.log(cart); 
}

你沒有定義change方法，定義也。

寫您成分是這樣的：

export default class Cart extends Component { 
    constructor(){ 
     super(); 
     this.state = {value: ''} 
     this.handleClick = this.handleClick.bind(this); 
     this.change = this.change.bind(this); 
    } 

    handleClick() { 
     cart = {price:0,item:"userselection",size:"userselection"}; 
     console.log(cart); 
    } 

    change(e){ 
     this.setState({value: e.target.value}) 
    } 

    itemSelection(){ 
     let userOrder = {price:0,item:"",size:""}; 
     let userItem = ""; 
     if (userItem == "pants1") { 
      let itemPrice = 20.00; 
     } 
    } 


    render() { 
     return (
      <div className='Webshop' id='Webshop'> 
       <li> 
        <img src="./gods.jpeg" width="350" height="350"></img> 
        <button onClick={this.handleClick} id="addit">Add to cart</button> 
        <select id="size" onChange={this.change} value={this.state.value}> 
         <option value="medium">Medium</option> 
         <option value="large">Large</option> 
         <option value="x-large">X-large</option> 
        </select> 
        <img src="./gods.jpeg" width="350" height="350"></img> 
       </li> 
      </div> 
     ); 
    } 
}

來源

2017-04-13 04:04:11

出於某種原因，使用的WebPack當使用'handleClick =（E）=> {'原因和錯誤。 '模塊構建失敗：SyntaxError：意外的標記'。 – feners

因爲你可以在構造函數中綁定函數，檢查更新後的答案，它不會拋出錯誤。 –

是的。介意解釋爲什麼那個錯誤？ – feners

select元素請求this.state.value。看起來this.state是null，因此您在嘗試訪問null.value時看到該錯誤。

來源

2017-04-13 04:02:53 NukesForKids

如何解決「未捕獲的TypeError：無法讀取null的屬性'值'錯誤？

回答

相關問題