在默认组件 class 中使用 state 时做出反应，它给出未定义

Question

在这个反应代码中，当我尝试访问 this.state 时，它说它是未定义的。 我已经尝试过范围界定，但仍然出现错误。 我想访问 this.state.cartItems 属性以使其添加到购物车。 但它不允许我访问 this.state 的属性。 它是未定义的。

我想在 function 下面访问 this.state。

 addToCart(product) {
            console.log(this.state.products)
            console.log('adding to cart ...')
        }


import React, { Component } from "react";
import Product from "./../components/client/Product";
import Cart from "./../components/client/Cart";
import data from "./../data.json";

export default class StorePortal extends Component {
    constructor() {
        super();    
    }
    state = {
        products: data.products,
        cartItems: []
    };
    addToCart(product) {
        console.log(this.state.products)
        //let items = this.state.cartItems.slice();
        // let isAdded = false;
        // items.forEach((item)=>{
        //     if(item._id === product._id){
        //         item.count++;
        //         isAdded = true;
        //     } 
        //     if(!isAdded){
        //         items.push({...product, count: 1});
        //     }
        // })

        console.log('adding to cart ...')
    }
    removeFromCart(product) {
        console.log('removing from cart')
    }

    render() {

        return (
            <div>
                <div className="content">
                    <div className="main">
                        <Product
                            products={this.state.products}
                            addToCart={this.addToCart}
                            removeFromCart={this.removeFromCart}
                        ></Product>
                    </div>
                    <div className="sidebar">
                        <Cart cartItems={this.state.cartItems} />
                    </div>
                </div>
            </div>
        );
    }
 
}

Answer 1

如果我明白你在问什么，问题是你正在这样做： addToCart={this.addToCart}在 Product 组件上。

简短的回答：将其更改为内联箭头 function：

addToCart={(...args) => this.addToCart(...args)}

直接通过function的问题是你丢失了scope； this不再指向组件实例。 一般来说，一个函数的作用域——this指向的——绑定到this被调用的object：

// inside someMethod, "this" will be myObject.
myObject.someMethod()

 // invoked independently, "this" is no longer myObject.
const { someMethod } = myObject;
someMethod();

Answer 2

将 state 放入构造函数中。

 constructor(props) {
        super(props);  
       this.state = {
        products: data.products,
        cartItems: []
    }
} 

然后尝试访问它。