javascript - 如何修复 "Uncaught TypeError: Cannot read property ' value' of null”错误？

Question

我想在 React 中设置一个简单的购物车。我正在尝试提供一个包含服装尺寸的下拉菜单。我在渲染中设置了它，但出了点问题，我得到:Uncaught TypeError: Cannot read property 'value' of 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 值是否有问题？

编辑

由于这是由 Null 值引起的，我该如何修复此问题以获取下拉菜单？

Answer 1

原因是，您没有定义构造函数和state变量，并且您正在访问this.state.value。首先定义状态，如下所示:

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

您以错误的方式使用箭头函数，请像这样使用它:

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>
        );
    }
}