無法將道具傳遞給迭代中的子組件

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

已經有一個數組值，如果我推薦我的

0，一切都很好

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