React - 通過對象數組映射

Question

我能夠在使用對象時映射數據，但在使用數組時它不起作用。

命令行中沒有任何錯誤輸出。

幫助讚賞。

感謝

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class JoeApp extends React.Component { 
    render() { 
     var data = [ 
      { 
       name: "Joe", 
       age: 27 
      }, 
      { 
       name: "John", 
       age: 27 
      }, 
      { 
       name: "Bill", 
       age: 25 
      } 
     ]; 

     return (
      <Data data={data} /> 
     ); 
    } 
} 

class Data extends React.Component { 
    render() { 
     return (
      <div>{this.props.data.name.map((info) => info.name})}</div> 
     ); 
    } 
} 

ReactDOM.render(<JoeApp />, document.body); 

Answer 1

您需要使用.map()功能陣列本身上，這將是this.props.data：

var data = [ 
     { 
      name: "Joe", 
      age: 27 
     }, 
     { 
      name: "John", 
      age: 27 
     }, 
     { 
      name: "Bill", 
      age: 25 
     } 
    ]; 

：

<div>{this.props.data.map((elem) => elem.name})}</div> 

這將對象的數組轉換

對name字符串的數組：

var data = ["Joe", "John", "Bill"];