複数のパラメータを持つ反応関数

Question

データベースから選択した項目を削除するAPIメソッドを呼び出すdelete関数を使用しようとする際に問題があります。

APIはページIDを受け入れるだけなので、IDをAPIに送信しようとしています。

これは、アプリケーションのメインコンテナに存在する機能です。

deletePage(id) { 
    instance.put(`/admin/deletePage/${id}`).then((response) => { 
     this.getPages(); 
     window.location.replace('/') 
    }).catch((error) => { 
     console.log(error) 
    }) 
    } 

私はその後、私は削除を処理するために別の関数を作成するダッシュボードコンポーネントに小道具としてこの機能を伝承：

handleDelete(e, id) { 
    e.preventDefault() 
    this.props.deletePage(id) 
    } 

、最終的には、機能をレンダリングマイ：

render() { 
    const pages = this.props.pages.map((page, i) => { 
     return (
     <div key={i}> 
     <h2>{page.title}</h2> 
     <a href={`/admin/edit-page/${i}`}>Edit</a> 
     <button onClick={this.handleDelete(i)}>Delete</button> 
     </div> 
     ) 
    }); 

    return (
     <div> 
     <h2>Dashboard</h2> 
     {pages} 
     </div> 
    ); 
    } 

現在、コンソールでこのエラーが発生しています。e.preventDefault is not a function

preventDefault行を削除して、一定のリロードを引き起こします。

助けてください。ちょうどmuffahaを削除しようとしています

Answer 1

これを行うには、より高次の関数を使用する必要があります。他の関数を返す関数です。

handleDelete(id) { 
    return (event)=> { 
     event.preventDefault() 
     this.props.deletePage(id) 
    } 
} 

は、あなたが 'this.handleDelete（I）' と呼ぶ

<button onClick={this.handleDelete(i)}>Delete</button> 

Answer 2

私はここに2つの問題があると思います。

最初に、this.handleDeleteの順番を逆にする必要があります。this.handleDelete(id, e)。イベントオブジェクトは常に最後に供給されます。

第2に、onClick={this.handleDelete(i)}はonClick={this.handleDelete.bind(this, i)}である必要があります。 onClick={this.handleDelete(i)}は、this.handleDeleteを呼び出した結果をonClickに割り当てます。ユーザーがボタンをクリックしたときにその関数が呼び出されることを意味するときに、レンダリングフェーズ中に誤ってthis.handleClickに電話しています。