React - 无法读取未定义的属性[重复]答案

【问题标题】：React - Cannot read property of undefined [duplicate]React - 无法读取未定义的属性[重复]
【发布时间】：2017-06-05 21:39:17
【问题描述】：

通常当我单击子组件中的菜单项时，它会调用 {this.handlesort} 这是一个本地函数。处理排序从我的父组件中获取 onReorder 道具。 {onReorder} 调用一个名为 reOrder 的本地函数。它设置 {orderBy 和 orderDir} 的状态。问题是，当我点击 {menuitem} 时，它立即返回此错误。（未捕获的类型错误：无法读取未定义的属性“onReOrder”）。通常当我不使用 es6 时它可以工作。请帮忙

（父组件）

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

【问题讨论】：

标签： reactjs meteor ecmascript-6

【解决方案1】：

您必须确保正确绑定传递给内联事件处理程序的函数，以便它们内部的调用能够正确引用组件范围的this：

在您的组件中定义以下构造函数：

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

【讨论】：

绑定后出现另一个错误（无法读取未定义的属性“toLowerCase”）。它来自我的父组件上的这段代码 tenants = _.orderBy(tenants, function(item) { return item[orderBy].toLowerCase(); }, orderDir);//orderBy.你知道可能是什么原因吗
item[orderBy] 正在解析为未定义。
你试过调试item[orderBy]解析的内容吗？
它在开始时解析我的数据，但是当我点击菜单项时它解析为未定义。
很难说，可能值得将此作为另一个问题添加并添加父组件的代码。

【解决方案2】：

问题是您在handleSort 和handleOrder 中引用的this 不是指组件的this，而是指内部方法this。

这个问题有两种解决方案。

在组件的构造函数中将函数与组件的 this 绑定：

export default class SearchTenant extends Component {

    constructor() {
        this.handleSort = this.handleSort.bind(this)
        this.handleOrder = this.handleOrder.bind(this)
    }

    // rest of the code
}

或者使用提供词法作用域的 ES6 的 arrow 函数：

export default class SearchTenant extends Component {

    handleSort = () => {
        this.props.onReOrder(e.target.id, this.props.orderDir)
    }
}

【讨论】：