ReactJS配列マップ

Question

配列要素を表に印刷しようとしています。配列はデータに格納されます。マップを（）を使用している間、私は

にコードを 「ヌルのプロパティを読み取ることができません」エラーを取得しておく、私はのTableRowクラスにデータを送信しようとしています

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; 

です。このエラーを修正するのを手伝ってください。

Answer 1

TableRowコンポーネントでは、stateの代わりにpropsを使用してください。あなたは外から部品にデータを渡しています、それは小道具のためです。ステートは、コンポーネントから直接設定する場合にのみ使用します。もちろん、各コンポーネントごとに状態が分かれています。

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> 
    ); 
} 
}