你好,大家好,的setState()不更新视图 - reactjs
使用Reactjs一个项目,我才刚刚开始,但我坚持在这个问题上,可以与一些帮助做。我试图实现订单管理系统,在订单管理系统中使用websockets将订单推送到浏览器,然后将reactjs视图更新为与该数据相同的值。在交互过程中会在UI上处理关联的事件,这些事件应更新订单的状态。由于我刚开始使用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'));
如果您要添加小提琴,请使其工作,以便我们可以看到代码正在运行。 – David