React JS lodashは同じ機能を持っています

Question

私はLodashを使用して同じ行に文字列の2つのオブジェクトを表示したいですか？ chain（_.chain（vehicle）.get（ 'test'）.get（ 'test2））を使用することもできます。

これは私が材料-UIカードを使用していますし、私のコードは次のようになりますサンプルJSONファイル

 { 
     "results": [ 
     { 
      "vehicle": { 
      "plate_no": "ABC 1234", 
      "model": "Toyota Innova" 
      } 
     } 
     ] 
    } 

です。

{_.map(this.state.vehicle, (d, idx) =>{ 
    return(
    <Col xs={6} style={{margin: '20px 0 5px' }}> 
     <Card key={d.id}> 
     <CardHeader 
      avatar="http://lorempixel.com/100/100/nature/" 
      title={_.get(d.vehicle, 'model') - _.get(d.vehicle, 'plate_no')} 
      actAsExpander={true} 
      showExpandableButton={true} 
      style={{backgroundColor: Colors.grey200}} 
     /> 

と私の目標は、このようなタイトルを表示することです。

トヨタイノーバ - ABC 1234

Answer 1

あなたは、あなたがそれらをしたいためで、あなたがしたいプロパティの配列で_.at()を使用することができ、その後、アレイ＃は、それらを結合：

const d = { 
 
    "vehicle": { 
 
    "plate_no": "ABC 1234", 
 
    "model": "Toyota Innova" 
 
    } 
 
}; 
 

 
const result = _.at(d.vehicle, ['model', 'plate_no']).join(' - '); 
 

 
console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

lodashを使用する代わりに、単純な構造化（テストされていないコード）を使用できます。コード：

{_.map(this.state.vehicle, ({ vehicle: { model, plate_no } }, idx) =>{ // destructure the vehicle object 
    return(
    <Col xs={6} style={{margin: '20px 0 5px' }}> 
     <Card key={d.id}> 
     <CardHeader 
      avatar="http://lorempixel.com/100/100/nature/" 
      title={`${model} - ${plate_no}`} // use the destructured props 
      actAsExpander={true} 
      showExpandableButton={true} 
      style={{backgroundColor: Colors.grey200}} 
     />