Question

当我尝试在我的父组件中的地图迭代中将道具传递给子组件时，我遇到了问题。它始终显示消息通知

TypeError：无法读取未定义
的属性'props'

有人可以帮我弄清楚我的代码中有什么问题吗？我已经尝试通过本地状态，然后仍然出错。

这是我的代码：我的父组件

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

您需要传递地图回调函数，并显式传递给引用React组件的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>
        )
    }
}

无法在迭代内将道具传递给子组件

1 个答案: