陣營HandleDelete類型錯誤未定義

我必須做出反應組件調用網站來進行狀態陣營HandleDelete類型錯誤未定義

class Websites extends React.Component { 

    constructor(props) { 
    super(props); 
    this.handleWebsiteDelete = this.handleWebsiteDelete.bind(this); 
    this.state = { 
     websites: this.props.websites 
    } 
    } 

    handleWebsiteDelete(id) { 
    console.log("delete") 
    // How to Run This Function? 
    // ...further code to delete id from state.websites 
    } 

    render() { 
    return(
     <div className="row"> 
     { 
      this.state.websites.map(function(website, index) { 
      return (
       <WebsiteItem key={website.id} {...website} onDelete={this.handleWebsiteDelete}/> 
      ) 
      }) 
     } 
     </div> 
    ); 
    } 
}

然後，我必須作出反應稱爲WebsiteItem組件與功能handleDelete對象：

class WebsiteItem extends React.Component { 

    handleDelete(e) { 
    e.preventDefault(); 
    $.ajax({ 
     method: "DELETE", 
     url: "/websites/" + this.props.id 
    }) 
     .done(function(){ 
     this.props.onDelete(this.props.id); 
     }.bind(this)) 
    } 

    render() { 
    return (
     <div className="card"> 
     {this.props.name} 
     <a href="#" onClick={this.handleDelete.bind(this)}>Delete</a> 
     </div> 
    ); 
    } 
}

我的目標是刪除網站從一個服務器使用ajax裏面的WebsiteItem組件（成功完成），並運行一個功能onDelete裏面的網站組件更新狀態this.state.websites。

我不能設法運行該函數的錯誤：Uncaught TypeError: this.props.onDelete is not a function - 我試圖玩bind（this），但不知道如果我完全理解它。謝謝。

來源

2016-09-18 Dudis

你幾乎說得對。

您必須bind您傳遞給您的組件實例的回調函數this.state.websites.map()。

爲了做到這一點，你必須上下文作爲第二個參數傳遞給.map()

{ 
    this.state.websites.map(function(website, index) { 
     return (
      <WebsiteItem key={website.id} {...website} onDelete={this.handleWebsiteDelete}/> 
     ) 
    },this) 
}

或者使用箭頭功能

{ 
    this.state.websites.map((website, index) => { 
     return (
      <WebsiteItem key={website.id} {...website} onDelete={this.handleWebsiteDelete}/> 
     ) 
    }) 
}

來源

2016-09-18 10:21:21 QoP

陣營HandleDelete類型錯誤未定義

回答

相關問題