我已经设置了一个PubSub事件系统,但由于某种原因,在尝试再次设置成功接收到的组件的状态时,我收到了一个Cannot read property 'items' of undefined
。
我似乎无法访问this
,但不确定为什么?
吊篮组件
class BasketContainer extends React.Component{
constructor() {
super()
this.state = {
items: [],
subTotal: 0,
totalPrice: 0,
deliveryPrice: 0
}
}
componentWillMount() {
this.setState( {
items: this.props.items,
})
}
componentDidMount() {
this.token = PubSub.subscribe('ADD_BASKET', this.subscriber)
this.calculateTotals();
}
componentWillUnmount() {
PubSub.unsubscribe(this.token)
}
subscriber(msg, data){
console.log(msg, data) // CONSOLE LOGS CORRECTLY :)
this.setState({
items: this.props.items // RETURNING Cannot read property 'items' of undefined
})
}
.... bottom of file and Render ....
ProductItem组件-执行发布的位置
class ProductItem extends React.Component{
constructor() {
super()
this.state = {
name: '',
price: 0,
code: '',
id: ''
}
}
componentWillMount() {
this.setState({
name: this.props.data.name,
price: this.props.data.price,
code: this.props.data.code,
id: this.props.data.id
})
}
addtoBasket() {
$.ajax({
type: "POST",
url: "/items",
dataType: "json",
data: {
item: {
name: this.state.name,
price: this.state.price,
code: this.state.code
}
},
success: function(data) {
PubSub.publish('ADD_BASKET', data); // THIS WORKS CORRECTLY
console.log("success");
},
error: function () {
console.log("error");
}
})
}
render(){
let productName = this.props.data.name
let productPrice = this.props.data.price
let productCode = this.props.data.code
let productImg = this.props.data.image_url
return (
<div className="col-xs-12 col-sm-4 product">
<img src={productImg}/>
<h3 className="text-center">{productName}</h3>
<h5 className="text-center">£{productPrice}</h5>
<div className="text-center">
<button onClick={this.addtoBasket.bind(this)} className="btn btn-primary">Add to Basket</button>
</div>
</div>
)
}
}
知道我为什么会得到Cannot read property 'items' of undefined
吗?
我想问题出在上
this.token = PubSub.subscribe('ADD_BASKET', this.subscriber)
应该是
this.token = PubSub.subscribe('ADD_BASKET', this.subscriber.bind(this))