Javascript 反应：'；本州'；在子组件函数中未定义父组件的

我正在为在线商店开发ReactJS中的订单。现在我在浏览器控制台中得到这样的消息：“this.state”在组件函数中未定义。。。怎么了？我怎样才能避免这个问题？我在官方文件中没有发现任何线索

class Service extends React.Component {
    constructor(props){
        super(props);
        this.state  = {active:      false,}
    }
    clickHandler(){
        let active = !this.state.active;
        this.setState({active: active});
        this.props.addTotal((active == true ? this.props.price : -this.props.price));
    }
    render(){
        return(
            <p className={this.state.active ? 'active' : ''} onClick={() => this.clickHandler()}>
                {this.props.name} <b>${this.props.price.toFixed(2)}</b>
            </p>
        );  
    }
};

class OrderForm extends React.Component {
    constructor(){
        super();
        this.state  = { total:  0,}
    }   
    addTotal(price){
        this.setState({total: this.state.total + price});
    }
    serviceList(){
        var self    =   this;
        //Iteration with map method
        const serviceMapIterator = this.props.services.map(function(item, i, arr){
                return (<Service    key     =   {i.toString()} 
                                    name    =   {item.name} 
                                    price   =   {item.price} 
                                    active  =   {item.active} 
                                    addTotal=   {self.addTotal} >
                        </Service>);
        });
        return serviceMapIterator;
    }
    render(){
        let service =   this.serviceList();
        return(
            <div>
                {service}
                <p id={'total'}>Total <b>${this.state.total.toFixed(2)}</b></p>
            </div>
        );
    }
};
var services = [
    { name: 'Web Development',  price: 300 },
    { name: 'Design', price: 400 }
];

类服务扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={active:false，}
}
clickHandler（）{
让active=！this.state.active；
this.setState（{active:active}）；
this.props.addTotal（（active==true？this.props.price:-this.props.price））；
}
render（）{
返回(
this.clickHandler（）}>
{this.props.name}${this.props.price.toFixed（2）}

);  
}
};
类OrderForm扩展了React.Component{
构造函数（）{
超级（）；
this.state={total:0，}
}   
合计（价格）{
this.setState（{total:this.state.total+price}）；
}
服务列表（）{
var self=这个；
//映射迭代法
const serviceMapIterator=this.props.services.map（函数（项，i，arr）{
返回(
);
});
返回serviceMapIterator；
}
render（）{
让service=this.serviceList（）；
返回(
{service}
total${this.state.total.toFixed（2）}
);
}
};
var服务=[
{名称：'网络开发'，价格：300}，
{名称：'设计'，价格：400}
];

我怎样才能改变它？问题出在哪里？

从服务（子类）调用OrderForm（父类）中定义的addTotal（）方法。您需要有权访问父类的“状态”。所以你也要改变你的代码 通过添加带有.bind的行（此）：

或者对于serviceList（）方法，在javascript方法的.map（）之后添加.bind（this）。请参阅下文：

    serviceList(){
        var self    =   this;
        //Iteration with map method
        const serviceMapIterator = this.props.services.map(function(item, i, arr){
                return (<Service    key     =   {i.toString()} 
                                    name    =   {item.name} 
                                    price   =   {item.price} 
                                    active  =   {item.active} 
                                    addTotal=   {self.addTotal} >
                        </Service>);
        }.bind(this));
        return serviceMapIterator;
    }

serviceList（）{
var self=这个；
//映射迭代法
const serviceMapIterator=this.props.services.map（函数（项，i，arr）{
返回(
);
}.约束（这个）；
返回serviceMapIterator；
}

当调用addTotal时，这并不指订单组件的上下文。您应该在构造函数中绑定如下函数：

constructor() {
  ...
  this.addTotal = this.addTotal.bind(this)
}

您的addTotal函数如下所示：

addTotal(price){
        this.setState({total: this.state.total + price});
}

依照

你不应该写信

this.setState({total: this.state.total + price});

您应该使用第二种形式的setState，它接受一个回调函数，该函数接收previousState和previousProps作为参数

addTotal(price) {
  this.setState((prevState, previousProps) => ({
    counter: prevState.total + price
  }));
}

clickHandler功能中需要进行类似的更改

addTotal(price) {
  this.setState((prevState, previousProps) => ({
    counter: prevState.total + price
  }));
}