Aus irgendeinem Grund wird nach dem Drücken meiner Entlassungsschaltfläche eine Fehlermeldung angezeigt. Es heißt "TypeError: Eigenschaft 'handleDismiss' von undefined kann nicht gelesen werden". Ich habe keine Ahnung, warum das passiert. Verbrachte den ganzen Tag mit googeln, aber ohne Erfolg

Ich habe versucht, die Handler zu wechseln und auch den Button zu binden. Immer noch das gleiche Ergebnis von "TypeError: Eigenschaft 'handleDismiss' von undefined kann nicht gelesen werden"

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


const basketballPlayers = [
  {id:1, name:"Stephen Curry", rating:97, position: "PG"},
  {id:2, name:"Kevin Durant", rating:85, position: "PF"},
  {id:3, name:"Klay Thompson", rating:80, position: "SG"},
  {id:4, name:"Vince Carter", rating:72, position: "SG"},
  {id:5, name:"Yao Ming", rating:99, position: "C"}
];

class App extends Component {

  constructor(props) {
    super(props);

    this.state ={
      basketballPlayers: basketballPlayers
    }
  }

  handleDismiss=(id) =>{
    console.log(id);
  }

  handleSubmit(e) {
    e.preventDefault();
    const searchTerm = e.target.elements.inputTerm.value;
    console.log("search term",searchTerm);
  }
  render() {
    return (
      <div className="App">
      <h1>Basketball Players</h1>
      <form onSubmit={this.handleSubmit}>
        <input name="inputTerm"/>
        <button class="btn btn-success btn-sm">SEARCH</button>
      </form>
       {this.state.basketballPlayers.map(function(basketballPlayer) {
         return(
           <div key={basketballPlayer.id}>
             <p>{basketballPlayer.name}</p>
             <p>{basketballPlayer.rating}</p>
             <p>{basketballPlayer.position}</p>
             <button onClick={()=>this.handleDismiss(basketballPlayer.id)}>Dismiss</button>
             </div>
         );
       })}
      </div>
    );
  }
}

export default App;

Ich möchte nur, dass meine Schaltfläche den Fehler nicht mehr anzeigt. Ich möchte die ID-Nummer von jedem Objekt auf der Konsole protokollieren

0
Kenny Quach 18 Jän. 2019 im 00:08

3 Antworten

Beste Antwort

Dies liegt daran, dass sich der Kontext des übergeordneten 'this' innerhalb der Karte ändert.

Sie können das Problem beheben, indem Sie den aktuellen Kontext 'this' als zweiten Parameter an die Kartenfunktion übergeben ODER die ES6-Pfeilfunktion verwenden.

this.state.basketballPlayers.map(function(basketballPlayer) { ... }, this)

ODER

this.state.basketballPlayers.map(basketballPlayer => { ... })
0
varoons 17 Jän. 2019 im 21:16

In Ihrer Map-Funktion erstellen Sie eine neue Funktion, die über ein eigenes this verfügt. Verwenden Sie stattdessen eine anonyme Funktion, um das übergeordnete this zu verwenden, ähnlich wie bei Ihrem onClick-Handler:

{this.state.basketballPlayers.map((basketballPlayer) => (
  <div key={basketballPlayer.id}>
    <p>{basketballPlayer.name}</p>
    <p>{basketballPlayer.rating}</p>
    <p>{basketballPlayer.position}</p>
    <button onClick={()=>this.handleDismiss(basketballPlayer.id)}>Dismiss</button>
  </div>
)}
1
dotconnor 17 Jän. 2019 im 21:13

Die Kartenfunktion verschleiert das "Dies". Versuchen Sie, die Funktion vorher zu isolieren:

let { handleDismiss } = this
{this.state.basketballPlayers.map(function(basketballPlayer) {
     return(
       <div key={basketballPlayer.id}>
         <p>{basketballPlayer.name}</p>
         <p>{basketballPlayer.rating}</p>
         <p>{basketballPlayer.position}</p>
         <button onClick={()=>handleDismiss(basketballPlayer.id)}>Dismiss</button>
         </div>
     );
   })}
0
Joao Polo 17 Jän. 2019 im 22:09