無法從JSON對象內部的陣列訪問值在Reactjs

Question

我有限定的本狀態：

constructor(props){ 
     super(props); 

     this.state = { 
      open: false, 
      customers:[], 
      customer:{}, 
      products:[], 
      product:{}, 
      orders:[], 
      order:{}, 
      newForm:true, 
      phoneNumbererror:null, 
      shop:this.props.salon, 
      value:'a', 
      showTab:'none', 
      slideIndex: 0, 

     }; 
    } 

與含有取下面的函數，我收到與responseData對象的數組。

getHistory(){ 
     console.log("Log antes del fetch de customer id"); 
     console.log(this.state.customer._id); 
     fetch(
      DOMAIN+'/api/orders/customer/'+this.state.customer._id, { 
       method: 'get', 
       dataType: 'json', 
       headers: { 
        'Accept': 'application/json', 
        'Content-Type': 'application/json', 
        'Authorization':'Bearer '+this.props.token 
       } 
      }) 
      .then((response) => 
      { 
       return response.json(); 
      }) 
      .then((responseData) => { 
       this.setState({orders:responseData}) 
       console.log("Log del responseData"); 
       console.log(responseData); 

      }) 
      .catch(function() { 
       console.log("error"); 
      }); 
    } 

該功能被稱爲在handleCellClick，其中I通過從消費者的一些數據，如ID：

handleCellClick(y,x,row){ 
     this.setState({ 
      open:true, 
      slideIndex: 0, 
      newForm:false, 
      customer:{...row} 
     }); 
     this.getProfiles(); 
     this.getHistory(); 

    } 

從得到的JSON對象的獲取，並保持它內this.state.orders看起來像這樣：對象的

(29) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] 
0: 
created:"2017-07-06T15:58:07.958Z" 
customer:"59561f3f1d178e1966142ad7" 
lastModified:"2017-07-06T15:58:07.958Z" 
orderList:[] 
orderStatusChange:Array(1) 
0:{status: "5", comments: "Creado en back antes de pagar", _id: "595e5e0f60fbf65149916b7c", created: "2017-07-06T15:58:07.958Z"} 
length:1 
__proto__:Array(0) 
shop:"59108159bc3fc645704ba508" 
totalAmount:4000 
__v:0 
_id:"595e5e0f60fbf65149916b7b" 
__proto__:Object 

捕捉更好地理解：CAPTURE

正如取，用這條線this.setState({orders:responseData})我可以通過orders到我想要的ID表，可以顯示日期和狀態前面所示：

<DataTables 
    height={'auto'} 
    selectable={false} 
    showRowHover={true} 
    columns={HISTORY_TABLE_COLUMNS} 
    data={this.state.orders} 
    showCheckboxes={false} 
    rowSizeLabel="Filas por página" 
     /> 

稱爲表是：

const HISTORY_TABLE_COLUMNS = [ 
    { 
     key: '_id', 
     label: 'Número de pedido' 
    }, { 
     key: 'created', 
     label: 'Fecha del pedido' 
    }, { 
     key: 'status', 
     label: 'Estado' 
    } 
]; 

的問題涉及到，當我想打印_id，created和status，前兩個值被印刷沒有任何問題，但status是陣列orderStatusChange內，我無法打印。

CAPTURE OF THE CURRENT SITUATION

如何訪問status打印它放在桌子上？

Answer 1

如果您在DataTable中找到一些可用的選項/道具來顯示您正在嘗試的內容，請使用它。

這聽起來可能有些粗的方式來實現你想什麼。但這應該工作。請更新下面的諾言回調。

.then((responseData) => { 
    let orders = responseData.map((order) => { 
     return order.orderStatusChange ? Object.assign({}, order, { 
     status: order.orderStatusChange[0].status 
     }) : order; 
    }) 
    this.setState({orders:orders}) 
}) 

在上面的代碼中，我檢查如果訂單有鑰匙「orderStatusChange」，它會採取狀態從第一條記錄，並與狀態返回一個新的對象，否則它會返回原始訂單對象。

Answer 2

按照Doc：

Column settings:

key   : string  
label  : string  
sortable : bool  
tooltip  : string  
className : string  
render  : function  //here 
alignRight : bool  
style  : object 

有一列屬性render，它的功能，用它來恢復一些自定義的元素，像這樣：

const HISTORY_TABLE_COLUMNS = [ 
    { 
     .... 
    }, { 
     .... 
    }, { 
     key: 'orderStatusChange', 
     label: 'Estado' 
     render: (staorderStatusChangetus, all) => { 
      /* 
       check the console values 
       i am expecting all will have the each object of the array, and 
       orderStatusChange will have that orderStatusChange array 
       so you can return the result of: 
       orderStatusChange.map(el => <p>{el.status}</p>) 
      */ 
      console.log('value', status, all); 
      return orderStatusChange.map(el => <p>{el.status}</p>) 
     } 
    } 
]; 

注意：不確定的值如此c檢查控制檯輸出並返回你想要的結果。