麻煩與反應

Question

1. 我在做什麼錯，特別是當我點擊按鈕，它給了我綁定的事件處理程序：遺漏的類型錯誤：無法讀取屬性「onDismiss」的未定義

2. 當是有必要將一個事件處理程序綁定到構造函數？

import React, { Component } from 'react'; 
 
import logo from './logo.svg'; 
 
import './App.css'; 
 
import contacts from './contacts'; 
 

 

 
class App extends Component { 
 
    constructor(props){ 
 
    super(props) 
 

 
    this.state = { 
 
     contacts 
 
    }; 
 

 
     this.onDismiss = this.onDismiss.bind(this); 
 
    } 
 

 
    onDismiss(id) { 
 
    console.log(id) 
 
    } 
 

 
    render() { 
 
    return (
 
     <div className="App"> 
 
      { 
 
      this.state.contacts.map(function(contact, i){ 
 
       return( 
 
        <div key={contact.id}> <br></br> 
 
        <div> First Name:</div> 
 
        <span> {contact.first_name}</span> 
 
         <div> Last Name:</div> 
 
        <span> {contact.last_name}</span> 
 
         <div> Email:</div> 
 
        <span> {contact.email}</span> 
 
        <div> <button type="button" onClick={() => this.onDismiss(contact.id)}>Remove Contact </button> </div> 
 
       
 
       </div> 
 
       ) 
 
      }) 
 
      } 
 

 

 

 

 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default App;

Answer 1

的問題是，你使用this一個function裏面，所以this是由函數，而不是封閉類的約束。嘗試使用拉姆達：

this.state.contacts.map((contact, i) => ( 
    <div key={contact.id}> 
     <br /> 
     <div>First Name:</div> 
     <span>{contact.first_name}</span> 
      <div>Last Name:</div> 
     <span>{contact.last_name}</span> 
      <div>Email:</div> 
     <span>{contact.email}</span> 
     <div> 
      <button type="button" onClick={() => this.onDismiss(contact.id)}> 
       Remove Contact 
      </button> 
     </div> 
    </div> 
)