2017-04-02 50 views
4

您不必讀取整個代碼,只需讀取評論中editQuantity功能和showOrderItem功能,特意在showOrderItem功能和我的問題是,我認爲僅僅是愚蠢的,因爲我的兩個功能都是按照他們應該工作的,如果地圖功能else語句reactjs

* editQuantity函數應該改變狀態,它會改變它,我通過添加控制檯線來檢查。

* showOrderItem函數應該顯示該項目,他也在做這項工作。

我的問題是,我嘗試在showOrderItem函數中添加conditional rendering,但不工作,即使我能夠更改狀態。

請閱讀showOrderItem功能的評論,看看問題出在哪裏:

import React from 'react'; 


export default class ShowOrder extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.state={ 
      quantityEditing:this.props.orderItems, 

     } 
    } 

    editQuantity(item){ 
     const order=this.state.quantityEditing; 
     for(var i =0; i<order.length; i++){ 

      if(order[i].item==item){ 
       console.log(order[i].orderQuantityEditing) 
       order[i].orderQuantityEditing=true; 
       this.setState({order:this.state.quantityEditing}) 
       console.log(order[i].orderQuantityEditing) 

      } 
     } 
    } 
    showOrderItem(){ 

     const style = {cursor:'pointer'} 
     const orderItems=this.state.quantityEditing; 
     console.log(orderItems) 
     const orderItem=orderItems.map((item,index)=> 


     <p> 
     {orderItems.orderQuantityEditing ? 'some': 
     <span style={style} onClick={this.editQuantity.bind(this,item.item)}> 
//as you can see in here i added conditional rendering, that if orderItems.orderQuantityEditing is true display me some, but that's not working --orderItems.orderQuantityEditing ? 'some'(this part) does not matter how many times i click on property it never display me my string 'some' 
      {item.quantity}</span>} 
     <span style={style}> {item.item}</span> 
     <span style={style}> Q</span> 
     <span style={style}> N</span> 
     <span style={style}> X</span> 
     </p> 

     ); 

     return orderItem; 
    } 
    render(){ 

     return(
     <div> 
     {this.showOrderItem()} 

     </div> 
     ); 
    } 
} 

回答

3

{orderItems.orderQuantityEditing ? 
    'some' 
    : 
    <span style={style} onClick{this.editQuantity.bind(this,item.item)}> 

相反,我認爲你需要寫:

{item.orderQuantityEditing ? 
    'some' 
     : 
     <span style={style} onClick={this.editQuantity.bind(this,item.item)}> 

因爲您使用的是map,並且項目將分別是的,所以你需要使用物品來訪問該屬性。在for loop,改變當state你寫道:

order[i].orderQuantityEditing=true; 

說它正確,以便將是一個array,你需要提供訪問的特定object索引。

+0

哦,男人,所以我是對的,我做了一些愚蠢的事情,我失去了我的想法,感謝您的幫助,讓我再檢查一次 – user2860957

+0

一件事,我認爲,而不是'this.setState({ order:this.state.order})'it should be' this.setState({orderQuantityEditing:order})'? –

+0

是的,你是對的,那一行是錯誤的,我的代碼到底是如何工作的, – user2860957