React - 无法读取未定义的属性

IT技术 reactjs meteor ecmascript-6
2021-05-06 21:56:53

通常，当我单击子组件中的菜单项时，它会调用 {this.handlesort}，这是一个本地函数。处理排序从我的父组件接收 onReorder props。{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
2个回答

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

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

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

问题是this你指的是 insidehandleSort而handleOrder不是指组件的 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 的箭头函数，它提供词法范围：

export default class SearchTenant extends Component {

    handleSort = () => {
        this.props.onReOrder(e.target.id, this.props.orderDir)
    }
}
其它你可能感兴趣的问题
上一篇如何结合自定义钩子来获取数据和上下文？ 下一篇不能将 React.lazy 与 Material UI 图标一起使用