1
votes

Erreur lors du passage des données entre les composants

J'essaie de transmettre une valeur d'un composant - Counters.jsx à Counter.jsx. Lorsque je vais à la console du développeur et que je fais un journal, je peux obtenir les données de: this.props.value mais lorsque j'essaie de le définir dans l'état, j'obtiens l'erreur suivante: TypeError: Impossible de lire la propriété 'value' de indéfini.

// This is the component: Counters

import React, { Component } from "react";
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 }
  ]
};

render() {
return (
  <div>
    {this.state.counters.map(counter => (
      <Counter key={counter.id} value={counter.value} selected={true} />
    ))}
  </div>
);
}
}



// This is the component: Counter

import React, { Component } from "react";

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

Le problème se situe dans la classe Counter lorsque je règle l'état - Count sur this.props.value. Cependant, cette valeur est accessible si je fais console.log (this.props.value).

J'obtiens cette erreur: Uncaught TypeError: Impossible de lire la propriété 'value' de undefined

Est-ce que quelqu'un sait si j'ai raté quelque chose et pourquoi je peux y accéder avec la console .log mais vous ne pouvez pas définir le nombre d'états sur this.props.value?

reactjs state components prop

0 commentaires

5 Réponses :

0
votes

Vous devez gérer des cas où il n'y a pas de props.value pour une raison quelconque.

class Counter extends Component {
  state = {
    count: this.props.value || 0,
  };
...
}

Dans votre cas, je pense que vous n'êtes pas obligé utilisez une autre valeur state . Il est préférable d'utiliser directement la variable props plutôt que d'utiliser la variable state .

3 commentaires

Je ne pense pas, veuillez vérifier ceci. codepen.io/minion/pen/VJMZbb

Utilisez les accessoires par défaut dans ce cas

Cela fonctionnera correctement avec -1 car il dit passer 0 quand il y a une valeur false (0, null, false) mais -1 est une valeur vraie.

0
votes

Définissez-le dans le constructeur:

constructor(props) {
    super(props);
    this.state = {
      count: props.value,
    };
}

2 commentaires

@ avinitish666: vous devez accepter la réponse si cela fonctionne pour vous!

@huMptyduMpty Je l'ai fait maintenant. Merci.

0
votes

Vous devez définir les valeurs par défaut dans le constructeur et mettre à jour l'état dans la méthode componentDidUpdate.

constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
}

componentDidUpdate(prevProps, prevState) {
   this.setState({count : this.props.value });
}

0 commentaires

0
votes

Ce que vous avez probablement manqué, c'est de passer des accessoires à super dans le constructeur.

constructor(props) { 
  super(props); 
  this.state = { count:this.props.value, }; 
}

Vous ne pouvez pas utiliser this.props dans le constructeur sans le passer à super.

Aussi, comme l'une des réponses qui dit que vous devez gérer les cas où il n'y a pas prop passé.

Je vous suggère d'utiliser les accessoires par défaut dans ce cas.

Vérifiez ici pour comprendre les accessoires par défaut et les types d'accessoires.

0 commentaires

0
votes

Remplacez le code de votre composant par:

import React, { Component } from "react";

class Counter extends Component {
  constructor(props){
    super(props);
    this.state = {
      count: this.props.value
    };
  };

Vous essayez d'utiliser this sans lui fournir un contexte approprié. Changez votre code comme je l'ai suggéré et cela devrait fonctionner correctement. J'espère que ça aide !!

0 commentaires