反应-无法读取未定义的属性 [英] React - Cannot read property of undefined

问题描述

通常，当我单击子组件中的菜单项时，它将调用{this.handlesort}，这是一个本地函数.句柄排序从我的父组件中获取onReorder道具. {onReorder}调用一个称为reOrder的局部函数.它设置{orderBy和orderDir}的状态.问题是，当我单击{menuitem}时，它立即返回此错误. (未捕获的TypeError:无法读取未定义的属性'onReOrder').通常，当我不使用es6时，它可以工作.请帮助

Normally When i click on the menu item in the child component it calls {this.handlesort} which is a local function. Handle sort takes in onReorder props from my parent component. {onReorder} calls a local function called reOrder. It sets the state of {orderBy and orderDir}. The problem is that immediately when i click on {menuitem} it returns this error. (Uncaught TypeError: Cannot read property 'onReOrder' of undefined). Normally it works when i am not using es6. Please help

(父组件)

export default class TenantView extends Component {
    constructor(props) {
        super(props);
        //setting state
        this.state = {
            //tenants: [],
            orderBy: 'name',
            orderDir: 'asc',};
    };
    componentWillMount() {
        this.setState({
            tenants:[{img: 'tenant1.jpg',name: 'John', address: '7 Gilbert', 
                     paid: 'true'},{img: 'tenant2.jpg',name:'Abba', address: 
                     '3 Vecq st', }]});//setState
    }//componentWillMount



    reOrder(orderBy, orderDir) {
        this.setState({
            orderBy: orderBy,
            orderDir: orderDir,
        });//setState
    }//reorder

    render(){
        var tenants = this.state.tenants;
        var orderBy = this.state.orderBy;
        var orderDir = this.state.orderDir;

        tenants = _.orderBy(tenants, function(item) {
            return item[orderBy].toLowerCase();
        }, orderDir);//orderBy

        tenants = tenants.map(function(item, index){
            return (
                <TenantList key = { index } singleTenant = { item } />
             )
        }.bind(this))

        return(
            <div style={styles.root}>
                <Subheader>Payment Status</Subheader>

                <PaymentStatus/>
                <SearchTenant
                    orderBy = { this.state.orderBy }
                    orderDir = { this.state.orderDir }
                    onReOrder = { this.reOrder }
                />
                <GridList cols={1} cellHeight={80} style={styles.gridList}>
                    {tenants}
                </GridList>
            </div>

        )//return
    }//render
}

子组件

export default class SearchTenant extends Component {
    handleSort(e){
        this.props.onReOrder(e.target.id, this.props.orderDir)
    }//handleSort

    handleOrder(e){
        this.props.onReOrder(this.props.orderBy, e.target.id)
    }//handleSort


    render(){
       return(
           <div className="input-group">
               <input placeholder="Search" type="text" onChange = { 
                this.handleSearch }  className= "validate"/>
               <DropDownMenu openImmediately={true}>
                   <MenuItem id = "name" onClick = {this.handleSort}>Name{ ( 
                        this.props.orderBy === 'name') ? <i 
                        className="material-icons">check_circle</i>: null }
                   </MenuItem>
                   <MenuItem id = "address" onClick = 
                       {this.handleSort}>Address{ 
                       (this.props.orderBy === 'address') ? <i 
                       className="material-
                       icons">check_circle</i>: null }
                   </MenuItem>
                   <MenuItem id = "asc" onClick = {this.handleOrder}>Asc{ 
                       (this.props.orderDir === 'asc') ? <i 
                       className="material-icons">check_circle</i>: null }
                   </MenuItem>
                   <MenuItem id = "desc" onClick = {this.handleOrder}>Desc{ 
                       (this.props.orderDir === 'desc') ? <i 
                        className="material-icons">check_circle</i>: null }
                   </MenuItem>
               </DropDownMenu>
           </div>
       )//return
    }//render
}//TeamList

推荐答案

您必须确保正确绑定传递给内联事件处理程序的函数，以使其中的调用能够引用的this正确的组件范围:

You have to ensure that you are binding the functions you pass to inline event handlers properly in order for the calls inside them to be able to reference this of the component scope correctly:

在组件中定义以下构造函数:

Define the following constructor in your component:

constructor (props){
  super (props):
  this.handleSort = this.handleSort.bind(this);
  this.handleOrder = this.handleOrder.bind(this);
}

这篇关于反应-无法读取未定义的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！