0
votes

Le composant ne rendant pas après des changements d'état

J'ai une interface avec deux équipes de boutons (caractéristiques et cibles). Lorsque je clique sur un bouton, je le souhaite d'une équipe d'aller à l'autre équipe. Je la met en œuvre avec React et Redux. Mon seul problème est que lorsque l'état est mis à jour et que je console Bûlez avec succès de l'état mis à jour le composant, à moins que je n'utilise forceUpdate (). Ce que je ne comprends pas, c'est que, étant donné que l'état est mis à jour avec succès, le composant ne se rependule pas automatiquement?

Certains.js p> xxx pré>

Comme vous pouvez le voir Je clique sur un bouton Je déclenche la fonction UpdateTelistes qui apportera le calcul pour modifier l'envoi à notre seule action les nouvelles données avec la fonction mise à jour et les boutons cible et l'action changera l'état dans le réducteur. P>

ACTION P>

    const initialState = {
        features:['f1','f2','f3','f4','f5'],
        targets:['t1','t2']
    }

    const addFeatureReducer = (state=initialState, action) =>{
        switch(action.type){
            case FEATURE_CHANGED:
                console.log("action: ", action)
                return {...state , state, features: action.data.features, targets: action.data.targets};
            default: 
                return state;
        }
    }
export default combineReducers({ addFeatureReducer })

reactjs redux

0 commentaires

3 Réponses :

0
votes

Après avoir déclenché une action Feature_Changed CODE>, votre réducteur renvoie un état mis à jour, qui est à son tour propagé via MapStaTeToprops à votre composant réactif en tant que NewProps. Dans la fonction Render, vous êtes en mappage sur this.state.state.SeatureFeatures code> et this.state.SelectedTargets code>. D'après ce que je vois, il semble que vous obteniez des fonctionnalités NEWPROTROS CODE> et CIBLES CODE>, vous ne les mettez pas à jour dans l'état de votre composant. Vous pouvez utiliser getDeriveStateFromProps code> Lifecycle pour mettre à jour l'état car de nouveaux accessoires arrivent.

getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.features !== prevState.features && nextProps.targets !== prevState.targets) {
        return ({
           selectedFeatures: nextProps.features,
           selectedTargets: nextProps.targets
        });
    }
    else if (nextProps.features !== prevState.features) {
       return ({
           selectedFeatures: nextProps.features,
        });
    } else if (nextProps.targets !== prevState.targets) {
       return ({
           selectedTargets: nextProps.targets,
        });
    }
}

1 commentaires

Cela ne fonctionne pas et ce que j'aimerais savoir parce que j'ai déjà encrassé ce problème, c'est que je suive l'état de mon composant dans le débogueur et dans la console.log et par ce qu'il imprime, l'état semble mettre à jour correctement. Néanmoins, bien que le composant ne rentre pas, les caractéristiques et les cibles séjournent dans leurs équipes d'origine. Si je fais un forcerUpdate () à la fin des mises à jour (), alors et que ce n'est que le composant accompagne l'état de mise à jour. Mais je ne veux pas mettre à jour manuellement la composante car elle devrait reformer automatiquement.

0
votes

    componentDidUpdate(prevProps) {
        if(this.props.features !== prevProps.features || this.props.targets !== prevProps.targets) {
      this.setState({
            selectedFeatures: this.props.features,
            selectedTargets: this.props.targets,
        }, console.log(this.state.selectedFeatures, this.state.selectedTargets))
    }

}

0 commentaires

0
votes

J'ai donc pensé pourquoi le composant ne mettait pas à jour, même si l'État était mis à jour. Il semble que dans les lutières uputées (), j'utilisais Push () et une épissure () directement sur la fonctionnalité et les tableaux cibles du magasin Redux mutant ainsi de mon état. En raison de la mutation, le composant ne voyait pas de changement d'état actuel et suivant. Réagir maintient dans la mémoire deux versions de l'état - la version actuelle et la suivante. Il compare les deux et met à jour le DOM uniquement avec les pièces qui ont changé. En raison du fait que je partageais l'état, réagirait à la fois de la même chose et de la même chose que cela ne met pas à jour. Donc, je viens de changer les licences de mise à jour (), j'ai appliqué la poussée () et l'épissure () dans des variables aléatoires (caractéristiques et cibles) que plus tard, j'ai passé plus tard que des données à notre action, en passant leurs valeurs avec l'opérateur de la propagation (comme nous l'avons fait auparavant) dans le état du magasin (initialstate).

if  (flag){
            index = this.state.selectedFeatures.indexOf(selectedFeature)
            const Features = [...this.state.selectedFeatures]
            Features.splice(index, 1);

            const Targets = [...this.state.selectedTargets]
            Targets.push(selectedFeature)

            console.log('features',features,'targets',targets)
            this.props.addFeature({features: Features , targets: Targets})
        }else{
            index = this.state.selectedTargets.indexOf(selectedFeature)
            const Targets = [...this.state.selectedTargets]
            Targets.splice(index, 1);

            const Features = [...this.state.selectedFeatures]
            Features.push(selectedFeature)

            console.log('features',features,'targets',targets)
            this.props.addFeature({ features:Features, targets: Targets})
        }

0 commentaires