Einstellzustand PubSub ReactJS und Rails

Question

ich Setup ein System Ereignisse PubSub aber aus irgendeinem Grund eine Cannot read property 'items' of undefined erhalte, wenn der Zustand meiner Komponente zu setzen versuchen, wieder erfolgreich erhalten zu haben.

Es scheint, ich habe keinen Zugriff auf this aber bin nicht sicher, warum?

BasketContainer Komponente

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 Component - wo ausgeführt wird

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> 
    ) 
} 

}

publish Jede Idee, warum ich Cannot read property 'items' of undefined bekommen könnte?

Answer 1

Ich denke, das Problem mit

ist

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

die

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