无法将道具传递给迭代中的子组件

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