SetState() не обновляя View - reactjs

Question

Добрый день, ребята,

Я только начал использовать Reactjs для проекта, но я застрял в этом вопросе и может сделать с некоторой помощью. Я пытаюсь внедрить систему управления заказами, где заказы переносятся в браузер с помощью веб-сокетов, а затем представление reactjs обновляется как пара данных. В процессе взаимодействия есть связанные события, которые обрабатываются в пользовательском интерфейсе, которые должны обновлять состояние ордеров. Поскольку я только начал использовать Reactjs, я решил жестко настроить мой набор данных, чтобы я мог видеть Заказы, отображаемые в списке. Однако я не могу щелкнуть по списку и получить информацию об этом щелкнутом элементе, чтобы обновить представление и отобразить его выделенное пространство, когда приложение запустится, только список Заказов отображается без подробного представления, как показано в приведенном ниже коде, или от http://jsfiddle.net/d5wvtyf0/ , Итак, вопрос в том, как я могу обновить представление и показать обновление, которое делает, вызвав setState(), или, может быть, вопрос в том, что я делаю неправильно в коде, который у меня уже есть?

/*This is a container for the title on the lefthand side - In Progress/Ready etc*/ 
var OrderItemsTitle = React.createClass({ 
    render: function(){ 
     return(
      <p className="row-progress">{this.props.title_text}</p> 
     ); 
    } 
}); 

OrderItemButtons = React.createClass({ 
    render: function(){ 
     return(
      <a href="javascript:void(0)" className="row-order " onClick={this.props.handleClick}> 
       <img src={this.props.orderitem.image_url} /> 
       <span className="txt">{this.props.orderitem.cust_name}</span> 
       <span className="status">{this.props.orderitem.time}</span> 
      </a> 
     ); 
    } 
}); 

/*This is the component that loads the items on the leftside of the screen*/ 
var ListViewOrderItemsContainer = React.createClass({ 
    handleClick: function(orderitem){ 
     this.props.onUserInput(orderitem); 
     console.log(this.props.selectedorderitem); 
    }, 
    render: function(){ 
     var filteredNewOrderItem = this.props.orderitems.filter(function(orderitem){ 
      return orderitem.status.toLowerCase().search('new') !== -1; 
     }); 
     var filteredReadyOrderItem = this.props.orderitems.filter(function(orderitem){ 
      return orderitem.status.toLowerCase().search('ready') !== -1; 
     }); 
     var filteredInProgressOrderItem = this.props.orderitems.filter(function(orderitem){ 
      return orderitem.status.toLowerCase().search('in_progress') !== -1; 
     }); 


     return(
      <div className='leftContainer'> 
       <OrderItemsTitle title_text='New' /> 
       <div className='new_progress_container'> 
        { 
         filteredNewOrderItem.map(function(orderitem, i){ 
          return <OrderItemButtons key={i} handleClick={this.handleClick.bind(this, 
           orderitem)} orderitem={orderitem} selectedorderitem={this.props.selectedorderitem} /> 
         }, this) 
        } 
       </div>  
       <OrderItemsTitle title_text='In Progress' /> 
       <div className='in_progress_container'> 
        { 
         filteredInProgressOrderItem.map(function(orderitem, i){ 
          return <OrderItemButtons key={i} handleClick={this.handleClick.bind(this, 
           orderitem)} orderitem={orderitem}/> 
         }, this) 
        } 
       </div> 
       <OrderItemsTitle title_text='Ready' /> 
       <div className='ready_container'> 
        { 
         filteredReadyOrderItem.map(function(orderitem, i){ 
          return <OrderItemButtons key={i} handleClick={this.handleClick.bind(this, 
           orderitem)} orderitem={orderitem}/> 
         }, this) 
        } 
       </div>  
      </div> 
     ); 
    } 
}); 

/*This is the productline details that is shown on the righthand side of the OMS*/ 
var ProductItemLineDetails = React.createClass({ 
    render: function(){ 
     return (
      <p>     
       <span className="pull-right"> 
        <strong>{this.props.productItem.productItemPrice}</strong> 
       </span> 
       <span className="text-muted"> 
        <strong>{this.props.productItem.productItemName}</strong> 
       </span> 
      </p> 
     ); 
    } 
}); 

/*This is the container element for ProductItemLineDetails above*/ 
var ProductItemDetails = React.createClass({ 
    render: function(){ 
     console.log("this.props.orderitem.length = ", this.props.orderitem.length); 
     var productRow; 
     if (this.props.orderitem.length === 0){ 
      productRow = "";    
     } 
     else { 
      productRow = this.props.orderitem.products.map(function(product, i){ 
       return <ProductItemLineDetails key={i} productItem={product} />    
      }); 
      console.log("productRow = ", productRow); 
     } 

     return ( 
      <div> 
       <div className="media"> 
        <small className="pull-right"> 
         23h ago 
        </small> 
        <div className="media-body"> 
         <h4 className="media-heading"> 
          Bruno Otas 
         </h4> 
         <span className="text-muted"> 
          (234)-8087616915 
         </span> 
         <br /> 
         <span className="text-muted"> 
          2 days ago at 2:30 am - 11.06.2014 
         </span> 
        </div> 
       </div> 
        <hr />    
        {productRow} 
        <hr /> 
      </div> 
     ); 
    } 
}); 

/**This is the main container that houses everything on the right hand side of the view**/ 
var DetailViewOrderItemsContainers = React.createClass({ 
    render: function() {   
     return (
      <div className="rightContainer"> 
       <ProductItemDetails orderitem={this.props.selectedorderitem} /> 
      </div>  
     ); 
    } 
}); 

var ParentContainer = React.createClass({ 
    getInitialState: function(){ 
     return { 
      selectedorderitem: [] 
     } 
    }, 
    handleUserInput: function(orderitem){ 
     this.setState({ 
      selectedorderitem: orderitem 
     }); 
     console.log("setstate hit", this.state.selectedorderitem); 
     console.log("setstate order", orderitem); 
     }, 
    render: function(){ 
     return (
      <div className="parentContainer"> 
       <ListViewOrderItemsContainer orderitems={this.props.orderitems} 
       onUserInput={this.handleUserInput} 
       selectedorderitem={this.state.selectedorderitem} /> 
       <DetailViewOrderItemsContainers selectedorderitem={this.state.selectedorderitem} /> 
      </div> 
     ); 
    } 
}); 


//var inProgressOrderDetails = [ 
var orderitems = [ 
{id: "2942934-343323-234242234-23423",status: 'new', time: "2", image_url: "/assets/images/profile_small.jpg", cust_name: "Nnamdi Jibunoh", products:[{id: "2422-34333-34343", variants: [{productItemPrice:"1800", productItemName: "Ice Cream"}]}] }, 
{id: "2942934-343323-234242234-23424",status: 'new', time: "3", image_url: "/assets/images/profile_small.jpg", cust_name: "Adeolu Adamu", products:[{id: "2422-34333-34343", variants: [{productItemPrice:"1800", productItemName: "Ice Cream"}]}] }, 
{id: "2942934-343323-234242234-23425",status: 'in_progress', time: "4", image_url: "/assets/images/profile_small.jpg", cust_name: "Alaku Ishienyi", products:[{id: "2422-34333-34343", variants: [{productItemPrice:"1800", productItemName: "Ice Cream"}]}] }, 
{id: "2942934-343323-234242234-23426",status: 'ready', time: "5", image_url: "/assets/images/profile_small.jpg", cust_name: "Ogochukwu Maduabum", products:[{id: "2422-34333-34343", variants: [{productItemPrice:"1800", productItemName: "Ice Cream"}]}] }, 
{id: "2942934-343323-234242234-23427",status: 'ready', time: "6", image_url: "/assets/images/profile_small.jpg", cust_name: "Bruno Otas", products:[{id: "2422-34333-34343", variants: [{productItemPrice:"1800", productItemName: "Ice Cream"}]}] }, 
]; 

React.render(<ParentContainer orderitems = {orderitems} />, document.getElementById('react_body')); 

Answer 1

Метод SetState работает хорошо ... Есть проблема с ваш код и ваши данные. Здесь у вас исправлен Fiddle.

https://jsfiddle.net/69z2wepo/8311/

Ваша функция визуализации в ProductItemDetails делала проверку длиной == 0 в чем-то, что является объектом. Хотя вы определили selectedorderitem в своем ParentContainer как массив, когда вы обновляете состояние, в котором вы передаете определенный объект (и детали вашего продукта ожидали массив). Кроме того, что-то подобное происходило в вашем ProductItemLineDetails (и набор данных все равно относится к ценам и названиям продуктов, поэтому я немного изменил его, чтобы вы могли видеть, что он работает).

Answer 2

Может быть, это потому, что вы входите в состояние, прежде чем он на самом деле обновление:

handleUserInput: function(orderitem){ 
    this.setState({ 
    selectedorderitem: orderitem 
    }); 
    console.log("setstate hit", this.state.selectedorderitem); 
    console.log("setstate order", orderitem); 
} 

Должно быть:

handleUserInput: function(orderitem){ 
    this.setState({ 
    selectedorderitem: orderitem 
    }, function() { 
    console.log("setstate hit", this.state.selectedorderitem); 
    console.log("setstate order", orderitem); 
    }) 
}