リストが別のリストの下にある場合にreactjsでmapを使用するには？

Question

マイ減速クラスは、このようなものです： - 今、私は このようなコンポーネントの助けを借りて、このデータを表示しようとしています

export default function() { 
     return [ 
      { 
       testId: 1, 
       testName: "80076-Hepatic (Liver) function Panel (PHX)", 
       labresultList:[ 
       { 
       labresultId:1, 
       loincCodeName:"Protein,Total", 
       status: "Under Lab Review", 
       value:90.0, 
       uom:"g/dl" 
       }, 
       ] 
      } 

     ] 
    } 

： -

class LabResultList extends Component{ 
    renderList() { 
     return this.props.labresult.map((test) => { 
      return (
       <ul> 
       <li key={test.testId} > 
        {test.testName} 
        {test.labresultList.map((result) => { 
         <li key={result.labresultId} > 
         {result.loincCodeName} 
         {result.status} 
         {result.value}{result.uom} 
         </li> 

       })} 
       </li> 
       </ul> 
      ); 
     }); 
    } 
    render() { 
     return (
      <ul> 
       {this.renderList()} 
      </ul> 
     ); 
    } 

} 

ここでは、renderresのlabresultListの値を取得できません。 は、上で定義したtestNameのみを表示します。 の下のマップを使用するにはどうすればよいですか？

Answer 1

あなたは、私はおそらく二つの成分に分割します内側のmap関数の内部で

class LabResultList extends React.Component{ 
 
    renderList() { 
 
     var labresult = [ 
 
      { 
 
       testId: 1, 
 
       testName: "80076-Hepatic (Liver) function Panel (PHX)", 
 
       labresultList:[ 
 
       { 
 
       labresultId:1, 
 
       loincCodeName:"Protein,Total", 
 
       status: "Under Lab Review", 
 
       value:90.0, 
 
       uom:"g/dl" 
 
       }, 
 
       ] 
 
      } 
 

 
     ] 
 
     return labresult.map((test) => { 
 
      console.log(test.labresultList); 
 
      return (
 
       <ul> 
 
       <li key={test.testId} > 
 
        {test.testName} 
 
        
 
        {test.labresultList.map((result) => { 
 
         return (
 
         <li key={result.labresultId} > 
 
         {result.loincCodeName} 
 
         {result.status} 
 
         {result.value}{result.uom} 
 
         </li> 
 
         ) 
 

 
       })} 
 
       </li> 
 
       </ul> 
 
      ); 
 
     }); 
 
    } 
 
    render() { 
 
     return (
 
      <ul> 
 
       {this.renderList()} 
 
      </ul> 
 
     ); 
 
    } 
 

 
} 
 

 
ReactDOM.render(<LabResultList/>, document.getElementById('app'));

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

Answer 2

をreturn文を忘れてしまいました。このように：

class LabResult extends Component { 
    render(){ 
     return (
      <ul> 
      {this.props.labresult.map((test) => { 
       <LabResultList key={test.testId} labresultList={test.labresultList} /> 
      })} 
      </ul> 
     ); 
    } 
} 

class LabResultList extends Component { 
    render(){ 
     return (
      <li> 
       <ul> 
       {this.props.labresultList.map((result) => { 
        <li key={result.labresultId}> 
         {result.loincCodeName} 
         {result.status} 
         {result.value}{result.uom} 
        </li> 
       })} 
       </ul> 
      </li> 
     ); 
    } 
}