はHandleDelete例外TypeErrorが

Question

を未定義私はウェブサイトの状態

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> 
    ); 
    } 
} 

を処理するために呼び出されるコンポーネントは、その後、私は機能とhandleDeleteオブジェクトをWebsiteItemと呼ばれるコンポーネントに反応していると反応しているリアクトWebsiteItemコンポーネント内のajaxを使用してサーバからWebサイトに移動し（正常終了）、 Webサイト内のコンポーネントを実行して、状態を更新しますthis.state.websites。

私はエラーで関数を実行することはできません：Uncaught TypeError: this.props.onDelete is not a function - 私はbind（これ）と一緒にプレイしようとしましたが、私はそれを理解しても分かりません。ありがとうございました。

Answer 1

あなたはほぼ正しいです。

コンポーネントインスタンスにthis.state.websites.map()に渡すコールバック関数をbindにする必要があります。それを行うためには

、あなたは.map()

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

に2つ目の引数としてコンテキストを渡すか、矢印の機能を使用する必要が

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