親メソッドの呼び出しが機能しないのはなぜですか？状態が更新されない

Question

コンポーネントから親メソッドを呼び出して状態を更新しようとしていて、状態を更新していないようです。コンソールログが実行されているときに関数が呼び出されていますが、状態は更新されていません。

<CustomerTable />コンポーネントにあるshowFirstFive()関数を、その子コンポーネント内で実行しようとしています - <CustomerEntry />（小道具として渡されました）。

上部のボタンは状態を良好に変更しますが、子コンポーネント内のテーブルのボタンは変更しません。

ご協力いただければ幸いです。あなたがそのメソッドを呼び出す必要が

codepen here

class CustomerEntry extends React.Component { 
    modifyState(e) { 
     e.preventDefault(); 
     console.log("test"); 
     this.props.changeState; 
    } 

    render() { 
     return (
      <tr> 
       <td>{this.props.name}</td> 
       <td>{this.props.email}</td> 
       <td>{this.props.postcode}</td> 
       <td> 
        {this.props.product} 
        <button onClick={this.modifyState.bind(this)}>Show first 5 items</button> 
       </td> 
      </tr> 
     ); 
    } 
} 

class CustomerTable extends React.Component { 
    constructor(props) { 
     super(props); 
     let customers = this.props.customers; 
     this.state = { 
      customers 
     }; 
    } 

    showFirstFive() { 
     let customers = this.props.customers; 
     customers = customers.slice(0, 5); 
     this.setState({ customers }); 
    } 
    showAll() { 
     let customers = this.props.customers; 
     this.setState({ customers }); 
    } 

    render() { 
     console.log("this.props.customers", this.props.customers); 
     let customerList; 

     let thisComp = this; 

     if (this.props.customers) { 
      customerList = this.state.customers.map(function(customerData) { 
       return (
        <CustomerEntry 
         key={customerData.key} 
         changeState={thisComp.showFirstFive.bind(this)} 
         index={customerData.key} 
         name={customerData.name} 
         email={customerData.email} 
         postcode={customerData.postcode} 
         product={customerData.product} 
        /> 
       ); 
      }); 
     } 

     return (
      <div> 
       <button onClick={this.showFirstFive.bind(this)} >Show first 5 items</button> 
       <button onClick={this.showAll.bind(this)} >Show all</button> 
       <table> 
        <thead> 
         <tr> 
          <th>Name</th> 
          <th>Email</th> 
          <th>Postcode</th> 
          <th>Product</th> 
         </tr> 
        </thead> 
        <tbody> 
         {customerList} 
        </tbody> 
       </table> 
      </div> 
     ); 
    } 
} 


class App extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      customers: [ 
       { 
        key: "86464", 
        name: "Mr John Smith", 
        email: "test@test.com", 
        postcode: "LN47AT", 
        product: "apples", 
       }, 
       { 
        key: "787862", 
        name: "Miss Sarah Jackson", 
        email: "sarah@hello.com", 
        postcode: "DN54LQ", 
        product: "apples", 
       }, 
       { 
        key: "4454564", 
        name: "Dr Hugh James", 
        email: "hugh@test.com", 
        postcode: "S102AT", 
        product: "bananans", 
       },    { 
        key: "11123134", 
        name: "Mr John Smith", 
        email: "test@test.com", 
        postcode: "LN47AT", 
        product: "apples", 
       }, 
       { 
        key: "68868", 
        name: "Miss Sarah Jackson", 
        email: "sarah@hello.com", 
        postcode: "DN54LQ", 
        product: "apples", 
       }, 
       { 
        key: "6876871", 
        name: "Dr Hugh James", 
        email: "hugh@test.com", 
        postcode: "S102AT", 
        product: "bananans", 
       }, 
           { 
        key: "17117", 
        name: "Mr John Smith", 
        email: "test@test.com", 
        postcode: "LN47AT", 
        product: "apples", 
       }, 
       { 
        key: "17171716", 
        name: "Miss Sarah Jackson", 
        email: "sarah@hello.com", 
        postcode: "DN54LQ", 
        product: "apples", 
       }, 
       { 
        key: "151571", 
        name: "Dr Hugh James", 
        email: "hugh@test.com", 
        postcode: "S102AT", 
        product: "bananans", 
       }, 

      ] 
     }; 
    } 

    render() { 
     return (
      <div> 
       <CustomerTable customers={this.state.customers} /> 
      </div> 
     ); 
    } 
} 

ReactDOM.render(<App />, document.getElementById("app")); 

Answer 1

、()を逃した：

：

modifyState(e) { 
    e.preventDefault(); 
    console.log("test"); 
    this.props.changeState(); //here 
} 

提案者：

代わりの方法を結合

onClick = {this.showFirstFive.bind(this)} 

コンストラクタでそれを定義します。

this.showFirstFive = this.showFirstFive.bind(this); 

次に、このようにそれを使用します。別の変数にthisキーワードの参照を保存するonClick = {this.showFirstFive}

2.が必要とされていない、あなたが使用していますarrow functionこのように：

customerList = this.state.customers.map((customerData) => { 
     //now you can access this 
}