ReactJS數組映射

Question

我試圖在表中打印數組元素。該數組存儲在數據中。在使用地圖（）我不斷收到 「看不懂空的財產」錯誤

代碼

import React from 'react'; 

class App extends React.Component{ 

constructor(){ 
    super(); 

    this.state={ 
     data:[ 
      { 
       "id":1, 
       "name":"Foo", 
       "age":"20" 
      }, 
      { 
       "id":2, 
       "name":"Bar", 
       "age":"30" 
      }, 
      { 
       "id":3, 
       "name":"Baz", 
       "age":"0" 
      }  
     ] 
    } 

} 

render(){ 
    return(
     <div> 
      <Header /> 
      <table> 
       <tbody> 
        {this.state.data.map((person,i)=><TableRow key={i} data={person} />)} 
       </tbody> 
      </table> 
     </div> 
    ); 
} 
} 

class Header extends React.Component{ 
render(){ 
    return(
     <div> 
      <h1>Header</h1> 
     </div> 
    ); 
    } 
} 

class TableRow extends React.Component{ 
render(){ 
    return(
     <div> 
      <tr> 
       <td>{this.state.data.id}</td> 
       <td>{this.state.data.name}</td> 
       <td>{this.state.data.age}</td> 
      </tr> 
     </div> 
    ); 
} 
} 

class Content extends React.Component{ 
render(){ 
    return(
     <div> 
      <h2>Content</h2> 
      <p>The content text!!</p> 
     </div> 
    ); 
} 
} 

export default App; 

我試圖將數據發送到的TableRow類。幫助我解決這個錯誤。

Answer 1

在TableRow組件中，使用props而不是state。您將數據從外部傳遞到組件，這就是道具的用途。只有在直接從組件設置的情況下，纔會使用狀態。當然，每個組件都有獨立的狀態。

class TableRow extends React.Component{ 
render(){ 
    return(
     <div> 
      <tr> 
       <td>{this.props.data.id}</td> 
       <td>{this.props.data.name}</td> 
       <td>{this.props.data.age}</td> 
      </tr> 
     </div> 
    ); 
} 
}