设置状态 PubSub ReactJS 和 Rails答案

【问题标题】：Setting state PubSub ReactJS and Rails设置状态 PubSub ReactJS 和 Rails
【发布时间】：2016-04-11 12:33:52
【问题描述】：

我已经设置了一个 PubSub 事件系统，但由于某种原因，当我再次尝试设置我的组件的状态并成功接收时，我收到了 Cannot read property 'items' of undefined。

我似乎无法访问this，但不确定为什么？

BasketContainer 组件

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吗？

【问题讨论】：

标签： javascript ruby-on-rails reactjs event-handling publish-subscribe

【解决方案1】：

我猜问题出在

    this.token = PubSub.subscribe('ADD_BASKET', this.subscriber)

应该是

    this.token = PubSub.subscribe('ADD_BASKET', this.subscriber.bind(this))

【讨论】：

感谢您的回答。这已经消除了错误，但 setState 似乎仍然没有重新渲染组件/数据。知道为什么会这样吗？ :)
@TomPinchen 你知道重新渲染有什么问题吗？面临同样的问题。