Javascript 在“在默认组件类中使用状态时作出反应”中，它给出了未定义的

在这个react代码中，当我尝试访问this.state时，它表示它未定义。我尝试了范围界定，但还是出现了错误。我想访问此.state.cartItems属性以将其添加到购物车。但它不允许我访问此.state的属性。它是未定义的

我想访问下面函数中的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>
        );
    }
 
}

addToCart（产品）{
console.log（this.state.products）
console.log（'添加到购物车…'）
}
从“React”导入React，{Component}；
从“//组件/客户/产品”导入产品；
从“/./组件/客户机/购物车”导入购物车；
从“/./data.json”导入数据；
导出默认类StorePortal扩展组件{
构造函数（）{
超级（）；
}
状态={
产品：数据产品，
项目：[]
};
addToCart（产品）{
console.log（this.state.products）
//让items=this.state.cartItems.slice（）；
//设isAdded=false；
//items.forEach（（项目）=>{
//如果（项目编号===产品编号）{
//item.count++；
//isAdded=真；
//     } 
//如果（！isAdded）{
//推送（{…产品，计数：1}）；
//     }
// })
console.log（'添加到购物车…'）
}
从购物车（产品）中移除{
console.log（'从购物车中删除'）
}
render（）{
返回(
);
}
}

如果我理解您的要求，问题是您正在这样做：

addToCart={this.addToCart}

在产品组件上

简单回答：将其更改为内联箭头函数：

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

直接传递函数的问题是失去了作用域<代码>此不再指向组件实例。一般来说，函数的作用域（this指向的对象）绑定到调用它的对象：

//在someMethod中，“this”将是myObject。
myObject.someMethod（）
//独立调用，“this”不再是myObject。
const{someMethod}=myObject；
somethod（）；

将状态放入构造函数中

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

---

然后尝试访问它。

当您使用

console.log（数据）

时，您会得到什么？我会得到数据………这是您的问题。你的数据导入不起作用。我认为默认情况下无法导入json。json导入实际上正在工作。您可以像这样将json数据导入react代码。您直接访问数据的方式有效。。。你能解释一下原因吗？哦，你修改了你的评论。你最初说你得到了<代码>未定义。我把AdtToCoTo（）方法引用到PROUCTL组件中，以触发事件并将数据投向父组件（StuteCyMon），如果函数被频繁调用，你可以考虑在构造函数中使用Boin。code>this.someMethod=this.someMethod.bind（this）无需在构造函数中定义状态。OP的操作方式很好。请尝试在构造函数（）中绑定函数addToCart