ReactJS：返された複数のオブジェクトのレンダリング

Question

これは適切なタイトルが何であるべきかわからないので、正確でない場合は申し訳ありません。

私は状態のオブジェクトのリストを持っている：

people: [ 
{first:'First_1', last:'Last_1', title:' Title_1', company:'Company_1'}, 
{first:'First_2', last:'Last_2', title:'Title_2', company:'Company_2'}, 
], 

現在、私はこのような列に各属性をレンダリングしています：

var first = this.state.people.map(function(person, i) { 
      return (
       <div key={i}> 
        {person.first} 
       </div> 
      ) 
     }); 

などlast、title、同じこと

そして次にreturn：

私は属性ごとに var first = ...、 var last = ...、などなどを持っている）

1：

これは、現在動作しますが、私は2つの問題を抱えています。

2）1つの属性が不足していると、すべてが上がります。 IE - First_1にタイトルがない場合は、そのレコードにTitle_2が与えられます。

私は1つの変数にすべてを組み合わせるためにしようとしていた。

var test = this.state.people.map(function(person, i) { 
      return { 
       first: function() { 
        return (
         <div key={i}>{person.first}</div> 
        ) 
       }, 

       last: function(){ 
        return (
         <div>{person.last}</div> 
        ) 
       } 
      } 

     }); 

そしてreturn中：

<Col md={2}> 
    {test.first} 
</Col> 
<Col md={2}> 
    {test.last} 
</Col> 

が

これが動作しないなど、私は思っていた場合がありこの仕事をする方法でしたか？

Answer 1

私は次のように、単一の関数でこれを行うだろう：

getParams (param) { 
this.state.people.map(function(person, i) { 
    return (
     <div key={i}> 
      {person[param]} 
     </div> 
    ) 
    }) 
} 

とでは、あなたがこれを持っているだろうレンダリング：

return (
     <div> 
      <Grid> 
       <Row className="show-grid"> 
        <Col md={2}> 
         {this.getParams('first')} 
        </Col> 

        <Col md={2}> 
         {this.getParams('last')} 
        </Col> 

        <Col md={2}> 
         {this.getParams('title')} 
        </Col> 
        <Col md={2}> 
         {this.getParams('company')} 
        </Col> 
        <Col md={2}> 
         Recruiter Phone Screen 
        </Col> 

       </Row> 
     </Grid> 

     </div> 
    ) 

Answer 2

私はこのような状況に対処するためのより良い方法を作成することであると仮定テーブルではなく、columns in a div

class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     people: [ 
 
     {first:'First_1', last:'Last_1', title:' Title_1', company:'Company_1'}, 
 
     {first:'First_2', last:'Last_2', title:'Title_2', company:'Company_2'}, 
 
     ] 
 
    } 
 
    } 
 
    render() { 
 
     return (
 
      <table> 
 
       <tbody> 
 
        {this.state.people.map(function(item, index) { 
 
         return (
 
          <tr> 
 
           <td>{item.first}</td> 
 
           <td>{item.last}</td> 
 
           <td>{item.title}</td> 
 
          </tr> 
 
        ) 
 
        })} 
 
       </tbody> 
 
      </table> 
 
     )  
 
    } 
 
} 
 
     
 
     ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> 
 

 
<div id="app"></div>

と一緒に行きます