J'essaie de comprendre pourquoi je ne peux pas définir mon état Redux dans mon état local. Fondamentalement, j'essaie de donner Voici ce que je travaille avec: p> ce qu'il ressemble après i console.log (this.props.tournoses): strong> p> résultat de la console p> affiché code> la valeur de ceci.props.tournaments code> afin que je puisse manipuler l'état. Mais chaque fois que je le définis et console.log (this.state.displayed) code> comme indiqué dans la fonction code> renderlist code>, il crache une matrice vide si je console.log (this.props.tournements) code> Je reçois les données dont j'ai besoin de mon API, des idées? import {
FETCH_TOURNAMENTS,
} from '../actions/types';
export default (state = {}, action, value: '') => {
switch (action.type) {
case FETCH_TOURNAMENTS:
return { ...state, [action.payload.id]: action.payload };
default:
return state;
}
};
4 Réponses :
Tout d'abord, et vous initialisez l'état à l'intérieur de l'état, donc si vous souhaitez mettre à jour l'état aussi chaque fois qu'il y a un changement Dans les accessoires, vous pouvez utiliser: comme vous pouvez déjà cartographier statutoprops , cela provoquera le re-rendu car il y a des modifications dans vos tournois , vous pouvez donc utiliser ces accessoires uniquement pour afficher le but et si vous souhaitez effectuer une modification, vous devez utiliser et votre Dispatch événement , c'est ainsi que vous devriez faire dans réacteur-redux architecture. console.log montrant Le résultat correct, c'est ainsi que cela fonctionne
Je ne ferais pas cela:
this.state = {
searchTerm: '',
displayed: this.props.tournaments
};
Il s'agit d'environ Cycle de vie du composant réactif. Votre méthode de constructeur appelée juste une fois lorsque le composant a été créé et ne mettra pas à jour après la mise à jour de vos accessoires.
composéDidMount méthode met à jour votre magasin Redux mais ne touche pas votre état local. Vous pouvez synchroniser votre état Redux State et State local dans ComponentDidUpdate de votre composant. N'utilisez pas composantwillreceiveProps c'est obsolète
C'est à cause de deux raisons:
tournois code> est défini de manière asynchrone à Redux lors de l'appel de la fonction fetchtournaments code>, la valeur initiale de affichée code> dans l'état local sera le Valeur initiale des tournois code> à Redux, c'est-à-dire une matrice vide. li>
- constructeur est exécuté une seule fois, alors même après la récupération des données et à Redux, vous avez une nouvelle valeur pour
tournois code>. Votre valeur d'état reste non affectée. D'où le non défini code> dans console.log code> li>
ol> Pour remédier à cela, P>
- Vous devez définir l'état de
affiché code> uniquement lorsqu'il y a une modification de la valeur des tournois code> Prop. Comme - li>
OL> this.state = {
searchTerm: '',
displayed: []
}
Pourquoi avez-vous voulu copier des données d'état déjà disponibles via Redux State à votre état local?