反復内で子コンポーネントに小道具を渡すことができません

Question

親コンポーネント内のマップ反復内の子コンポーネントに小道具を渡そうとすると問題が発生します。それは常にメッセージを表示します。

TypeError: Cannot read property 'props' of undefined

私のコードで何が間違っているのか理解できますか？私はすでに地元の州を通過しようとしていますが、それでもまだエラーがあります。ここ

は私のコードです： 私の親コンポーネントは

import React from 'react'; 
import { TabContent, TabPane, Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col } from 'reactstrap'; 
import classnames from 'classnames'; 

import PeriodicSetup from './PeriodicSetup'; 
import PeriodicDataTable from './PeriodicDataTable'; 

import {connect} from 'react-redux'; 
import store from '../../store/store'; 

class SetupPage extends React.Component { 

    constructor(props) { 
     super(props); 
     this.toggle = this.toggle.bind(this); 
     this.state = { 
      activeTab: 0, 
     }; 
    } 

    toggle(tab) { 
     if (this.state.activeTab !== tab) { 
      this.setState({ 
       activeTab: tab 
      }); 
     } 
    } 

    render() { 
     return (
      <div> 
       <Nav tabs> 
        {this.props.SetupTabTitles.map((data, i)=> 
          <NavItem> 
           <NavLink className={classnames({ active: this.state.activeTab === i})} onClick={() => {this.toggle(i); }}> 
            {data.tabTitle} 
           </NavLink> 
          </NavItem> 
         )} 
       </Nav> 

       <TabContent activeTab={this.state.activeTab}> 
        {this.props.SetupTabTitles.map(function(data, i) { 
         if(data.tabTitle == 'Tasks'){ 
          return (
           <TabPane tabId={i}> 
            test 
           </TabPane> 
          ) 
         }else if(data.tabTitle == 'Periodic'){ 
          return (
           <TabPane tabId={i}> 
            <PeriodicSetup /> 
            <PeriodicDataTable periodicData = {this.props.periodicList}/> 
           </TabPane> 
          ) 
         } 
        })} 
       </TabContent> 
      </div> 
     ); 
    } 

} 

function mapStateToProps(state){ 
    return { 
     SetupTabTitles : state.component.SetupTabTitles, 
     periodicList : state.setup.periodicList 
    }; 
} 

export default connect(mapStateToProps)(SetupPage); 

私の子コンポーネント：

import React from 'react'; 
const {Table, Column, Cell} = require('fixed-data-table'); 

export default class PeriodicDataTable extends React.Component { 

    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <div> 
       test 
      </div> 
     ) 
    } 
} 

コンディション私のコードでは、

this.props.periodicList

が既に配列値を持っています、私が私のことを賞賛するなら、すべてがうまくいきます。

<PeriodicDataTable periodicData = {this.props.periodicList}/> 

またはそれを繰り返して移動します。しかし、私はそれが繰り返し内に置かれた場合、なぜそれがエラーを持っていたのかまだ分かりません。

Answer 1

あなたはこのようなことに反応コンポーネントを参照してください this propsと呼ばれるプロパティを持たない、ないコールバック関数に明示的に渡すと、マップのコールバック関数を渡す必要

：

{this.props.SetupTabTitles.map(this.renderTabTitles.bind(this))} 

は、メソッドを追加しますあなたのクラスでは次のようになります：

renderTabTitles(data, i) { 
    if(data.tabTitle == 'Tasks') { 
     return (
      <TabPane tabId={i}> 
       test 
      </TabPane> 
     ) 
    } else if(data.tabTitle == 'Periodic') { 
     return (
      <TabPane tabId={i}> 
       <PeriodicSetup /> 
       <PeriodicDataTable periodicData = {this.props.periodicList}/> 
      </TabPane> 
     ) 
    } 
}