J'ai une application de réaction contenant deux composants, Counters et Counter, où l'objet d'état du composant Counters contient un tableau d'objets représentant chacun un compteur.

Dans le code jsx réel du composant Counters, les éléments du tableau counters sont rendus avec chacun contenant un bouton de suppression où chaque compteur individuel peut être supprimé. À l'heure actuelle, j'ai une fonction de flèche pour gérer la suppression qui est définie comme un dans les balises Counter en cours de rendu. Dans le composant Counter, il existe un événement onCLick dans le bouton de suppression qui prend comme paramètre l'identifiant du compteur sur lequel on a cliqué.

Pour une raison quelconque, la suppression ne fonctionne pas et lorsque je me connecte à la console, l'ID du compteur sur lequel on a cliqué, undefined est imprimé. Qu'est-ce qui pourrait empêcher la lecture de la propriété id à partir du composant Counter ?

Le code correspondant est ci-dessous :

Composant compteur :

class Counter extends Component {
  state = {
    value: this.props.value
  };


  render() {
    console.log(this.props);
    return (
      <div>
        {this.props.children}
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button
          onClick={() => this.handleIncrement({ id: 1 })}
          className="btn btn-sercondary btn-sm"
        >
          Increment
        </button>
        <button
          onClick={() => this.props.onDelete(this.props.id)}
          className="btn btn-danger btn-sm m-2"
        >
          Delete
        </button>
      </div>
    );
  }

Composant Compteurs :

import Counter from "./counter";

class Counters extends Component {
  state = {
    counters: [
      { id: 1, value: 4 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 }
    ]
  };

  handleDelete = counterId => {
    console.log("Event Handler Called", counterId);
    const counters = this.state.counters.filter(c => c.id !== counterId);
    this.setState({ counters });
  };
  render() {
    return (
      <div>
        {this.state.counters.map(counter => (
          <Counter
            key={counter.id}
            onDelete={this.handleDelete}
            value={counter.value}
          />
        ))}
      </div>
    );
  }
}
1
loremIpsum1771 14 mars 2019 à 07:34

2 réponses

Meilleure réponse

Vous devez passer la prop id à Couter dans la fonction de rendu du composant Couters car le bouton en a besoin <button onClick={() => this.props.onDelete(this.props.id)} ;

Vois ici

<Counter
   id={counter.id}
   key={counter.id}
   onDelete={this.handleDelete}
   value={counter.value}
/>

Alternativement, vous pouvez le faire

<Counter
   key={counter.id}
   onDelete={() => this.handleDelete(counter.id)}
   value={counter.value}
/>
1
Ponleu 14 mars 2019 à 04:56

Vous avez une faute de frappe.

Vous devez utiliser this.props.key dans la méthode delete dans la classe Component au lieu de this.props.id.

0
Amy 14 mars 2019 à 04:43