が、私はこの状態が定義されているReactjs

Question

でJSONオブジェクトの内部配列から値にアクセスすることはできません：フェッチが含まれている次の関数で

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

この関数は、このようなIDとして、私は消費者からいくつかのデータを渡す場合は、handleCellClickに呼び出されます。

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

    } 

this.state.orders以内にそれを取得しておくから取得したJSONオブジェクトは、次のようになります：より良い理解のためのオブジェクトの

(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})と私は、ID、日付、ステータスを表示させたいテーブルにordersを渡すことができます。

<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を印刷するとき、最初の2つの値が問題なく印刷されているようになりますが、statusが配列orderStatusChange内にあり、そして私はそれを印刷することはできません。私はテーブルの上に印刷するstatusにアクセスするにはどうすればよい

CAPTURE OF THE CURRENT SITUATION

？ DOCを1として

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

：列プロパティrenderあり

Column settings:

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

、その機能、このように、いくつかのカスタム要素を返すためにそれを使用します。

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その値についてのわかりません一体コンソール出力して、必要な結果を返します。