Bonjour, j'essaie de créer un composant de compteur pour ma boutique en ligne, mais j'ai du mal à le faire fonctionner correctement.
D'après ce que j'ai compris, la valeur count n'incrémentera pas car elle reste dans la même instance, et la valeur n'est jamais modifiée dans le composant parent qui vient d'être rendu. Déclarer une variable et essayer de l'incrémenter localement dans la méthode addOne () empêche également la valeur de changer.
Y a-t-il quelque chose que je ' Je ne comprends pas les instances et leur fonctionnement, est-ce que quelqu'un peut me donner des suggestions?
class ParentComponentClass extends React.Component {
render() {
const test = "Is anything printing?";
let count = 0;
return (
<div>
<QuantityCounter_CheckoutButton count={count} />
<Test test={test} />
</div>
);
}
}
class QuantityCounter_CheckoutButton extends React.Component {
constructor(props) {
super(props);
this.addOne = this.addOne.bind(this);
}
addOne() {
let qtyCount = this.props.count;
qtyCount++;
console.log(qtyCount);
}
render() {
return (
<div>
<a href="#" id="bazuka_add" onClick={this.addOne}>
<i className="material-icons ">add_circle_outline</i>
</a>
<a href="#" id="bazuka_remove" onClick={this.minusOne}>
<i className="material-icons ">remove_circle_outline</i>
</a>
<p>qty:</p>
</div>
);
}
}
3 Réponses :
Vous ne pouvez pas modifier un Prop de réaction comme celui-ci. Ce dont vous avez besoin est probablement État
Prop n'est passé que du composant parent au composant enfant et si un accessoire doit être modifié, cela devrait se produire dans le composant parent. Vérifiez la différence entre l'état et les accessoires ici: https://reactjs.org/docs/ faq-state.html
Je sais donc que vous avez marqué ceci comme une réponse, mais je veux vous expliquer ce concept. C'est un concept simple mais très important à saisir.
Imaginez juste deux fonctions
class Child extends React.Component{
render (){
<div>
<div>{this.props.count}</div>
<button onClick={this.props.increment} >Increment</button>
</div>
}
}
J'ai un conteneur qui appelle un incrémenteur. Maintenant, mon objectif est d'incrémenter la 'countVariable'. Mais la façon dont je l'ai fait; ma logique croissante est cassée. En effet, en passant la «valeur» via la fonction, je ne fais que transmettre une copie de la valeur mais pas un moyen de manipuler ma variable elle-même. (Si vous passez un objet, c'est une toute autre histoire mais qui mérite un article de blog séparé)
C'est la même chose avec les accessoires! Vous incrémentez simplement une copie des valeurs qui vous sont envoyées. De plus, cela devient un peu plus compliqué avec react car le 'render () {}' est censé être quelque chose appelé une fonction pure. Simplement pour vous, cela signifie qu'à chaque fois qu'il y a un changement de réaction, le contenu du rendu est détruit et réexécuté à partir de zéro. Cela signifie que vous ne pouvez pas maintenir une variable de compteur dans 'render'.
Nous avons donc 2 problèmes.
C'est là que l'état du composant de React est très pratique!
class Parent extends React.Component{
constructor(props){
super(props);
this.state ={
count : 0;
}
}
increment(){
this.setState({ counts : this.state.count + 1});
}
render (){
return(<Child count={this.state.count} increment={this.increment.bind(this)}/>);
}
}
Nous avons donc trouvé un moyen sûr de maintenir le 'state count' dans notre react composant. Ensuite, nous avons besoin d'un moyen de le mettre à jour. Cela signifie que l'enfant doit communiquer avec le parent car l'état est à l'intérieur du composant parent.
class Parent extends React.Component{
constructor(props){
super(props);
this.state ={
count : 0;
}
}
render (){
<Child count={this.state.count}/>
}
}
C'est un concept très puissant en réaction qui permet de construire des composants réutilisables. L'enfant ne sait rien de la façon dont le parent gère la variable. Il est seulement passé la valeur actuelle du compte ainsi qu'un fonction qu'il devrait appeler au cas où la valeur doit être incrémentée.
Donc, chez mon enfant, je dois juste faire ceci ...
function manipulateCounter(count){
count++
console.log(count)
}
function counterContainer(){
let countVariable = 0;
manipulateCounter(countVariable);
manipulateCounter(countVariable);
manipulateCounter(countVariable);
console.log(count);
}
Il vous suffit de modifier cet apprentissage dans votre application. Bonne chance!
Je suis d'accord sur "Vérifiez la différence entre l'état et les accessoires ici: https: // reactjs. org / docs / faq-state.html ". Mais vous devez également réorganiser vos composants afin que state et setState soient dans un seul composant, car si vous n'utilisez pas Redux, l'état est local. Je recommanderais de lire cet article https: / /medium.freecodecamp.org/get-pro-with-react-setstate-in-10-minutes-d38251d1c781
Au fait, si vous utilisez Redux, vous pouvez quitter votre mise en page et définir l'état via des réducteurs. Vous pouvez maintenant mettre à jour vos accessoires lorsque l'état a changé à l'aide de mapStateToProps.