반복 내 하위 구성 요소에 소품을 전달할 수 없습니다.

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