Uncaught Typeerror: kann nicht lesen Eigenschaft ‚onDismiss‘ undefinierter

Question

Ich habe ein Reagieren Komponente Beiträge:

import React, { Component } from 'react'; 

const list = [ 
    { 
    title: 'React', 
    url: 'https://facebook.github.io/react', 
    author: 'Adam Beat', 
    num_comments: 4, 
    points: 3, 
    objectID: 10, 
    }, { 
    title: 'Rails', 
    url: 'https://www.rubyonrails.org', 
    author: 'DHH', 
    num_comments: 8, 
    points: 4, 
    objectID: 11, 
    } 
] 

class Posts extends Component { 

    constructor(props) { 
    super(props); // call the constructor of the extended class 
    this.state = { // bound state with the this object 
     list: list, 
    }; 
    this.onDismiss = this.onDismiss.bind(this); 
    } 

    onDismiss(id) { 
    // const isNotId = item => item.objectID !== id; 
    // const updatedList = this.state.list.filter(isNotId); 
    const updatedList = this.state.list.filter(item => item.objectID !== id); 
    this.setState({ list: updatedList }); 
    } 

    render() { 
    return (
     <div className="home-page ui container"> 
     { 
      this.state.list.map(function(item) { 
      return (
       <ul key={item.objectID}> 
       <li> 
        <a href={item.url}>{item.title}</a> 
       </li> 
       <li>{item.author}</li> 
       <li>{item.num_comments}</li> 
       <li>{item.points}</li> 
       <li> 
        <button 
        onClick={() => this.onDismiss(item.objectID)} 
        type="button"> 
        Dismiss 
        </button> 
       </li> 
       </ul> 
      ); 
      }) 
     } 
     </div> 
    ); 
    } 
} 

export default Posts; 

Und ich versuche, ein Element aus der Liste zu entfernen, indem Sie auf „entlassen“ -Taste.

Aber eigentlich bekomme ich einen Fehler: „Nicht abgefangene Typeerror: kann Eigenschaft lesen‚onDismiss‘undefinierten“

Was bin ich?

Answer 1

Sie verwenden this.state.list.map(function(item) { ... }), also ist Ihr Kontext der einer map-Funktion. Wenn Sie es in this.state.list.map(item => { ... }) ändern, wird es funktionieren. Dies liegt daran, dass die Pfeilfunktionen automatisch an den Geltungsbereich des übergeordneten Bereichs this gebunden sind. Und innerhalb Ihrer map Funktion gibt es keine onDismiss Funktion. Wenn Sie this in einem Konstruktor binden, erhält onDismiss Funktion Ihre Komponenten Kontext. Sie müssen jedoch weiterhin Ihre Komponentenfunktion übergeben und in diesem Fall tun Sie das nicht.