React - 未定義のプロパティを読み取ることができません

Question

通常、子コンポーネントのメニュー項目をクリックすると、ローカル関数である{this.handlesort}が呼び出されます。ソートを処理すると、親コンポーネントからonReorder propsが取り込まれます。 {onReorder}は、reOrderというローカル関数を呼び出します。 {orderByとorderDir}の状態を設定します。問題は、{menuitem}をクリックすると即座にこのエラーが返されることです。 （Uncaught TypeError：未定義のプロパティ '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 
} 

childcomponentあなたはあなたが適切に順番にあなたはインラインイベントハンドラに渡す機能を結合していることを確認する必要が

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 

Answer 1

それらの内部を呼び出して、コンポーネントスコープのthisを正しく参照できるようにします。

コンポーネントに次のコンストラクタを定義します。

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

Answer 2

問題はthisあなたがhandleSortとhandleOrder内に言及されているが、コンポーネントのこの代わりに、それは内部メソッドにこれを参照しているに言及されていないということです。

この問題の2つの解決策があります。

どちらのコンポーネントのコンストラクタの内部コンポーネントのこのと機能をバインド：私は「結合した後、別のエラーを取得する（プロパティを読み取ることができません

export default class SearchTenant extends Component { 

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