如何修复“未捕获的类型错误：无法读取 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 值的 Render 是否有问题？

编辑

由于这是由于 Null 值，我该如何解决此问题以获取下拉菜单？

Answer 1

原因是，您没有定义 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>
        );
    }
}

Answer 2

select 元素正在请求 this.state.value。 this.state 似乎是 null，因此您在尝试访问 null.value 时会看到该错误。