1
votes

componentWillReceiveProps non appelé après la distribution redux

Je crée une application native React et j'utilise redux pour gérer l'état. Je rencontre une situation où l'un de mes conteneurs ne se met pas à jour immédiatement lorsque l'état de redux est modifié.

Conteneur:

fnc() {
    ...
    setData(data.concat(newDatum));
    ...
}

Réducteur:

const initialState: Store = {
    data: []
}

Dans un autre composant aléatoire, je distribue un appel avec l'action actionOne, que je confirme imprime le console.log correspondant. Cependant, le console.log dans le componentWillReceiveProps dans le conteneur n'est pas imprimé.

Le composant qui distribue l'appel est un modal qui est apparu sur le conteneur, et se ferme automatiquement une fois l'appel distribué et l'état Est mis à jour. Ce qui est étrange, c'est que bien que le conteneur ne soit pas mis à jour immédiatement, si je navigue vers une page différente puis reviens à la page du conteneur, l'état est en fait mis à jour.

EDIT: l'état initial est:

...
export default function reducer(state = initalState, action) => {
    switch(action.type) {
        case getType(actions.actionOne):
            console.log('SETTING THE STATE');
            return { ...state, data: action.payload };
        ...
    ...
...

Et la façon dont j'expédie est dans un composant différent qui est appelé en tant que nouveau modal (en utilisant react-native-navigation) depuis Container:

...
class ContainerClass extends Component<Props, State> {
    ...
    componentWillReceiveProps(nextProps: Object) {
        console.log('WILL RECEIVE PROPS:', nextProps);
    }
    ...
    render() {
        const { data } = this.props;
        return <SubComponent data={data} />
    }
}

const mapStateToProps = (state) => ({
    data: state.data
};

export default connect(mapStateToProps)(ContainerClass);

Où setData et data sont l'action de distribution redux et la partie du magasin respectivement qui est transmise aux accessoires du conteneur (qui a setData et data via mapStateToProps montré ci-dessus et un mapDispatchToProps que je n'ai pas montré).

reactjs react-native react-redux redux react-native-navigation

6 commentaires

Peut-être que votre code réel est différent, mais vous avez un paren non fermé dans mapStateToProps

@ Infamous911: Veuillez partager le code de la façon dont vous distribuez l'action

Veuillez partager votre structure state dans state = initalState

@RIYAJKHAN ajouté

@Isaac ajouté ci-dessus

Ajoutez également setData, comment appeler depuis mapdispatchtoprops?

4 Réponses :

0
votes

En supposant que vous utilisez une version récente de React, componentWillReceiveProps est en fait obsolète :

L'utilisation de cette méthode de cycle de vie conduit souvent à des bogues et des incohérences

Vous ne pouvez pas vraiment compter sur ce hook de cycle de vie dans un certain nombre de situations. Vous pouvez plutôt envisager une approche légèrement différente avec componentDidUpdate .

1 commentaires

Je pense personnellement que cela convient plus à un commentaire qu'à une réponse car cela ne résout pas le problème OTP

0
votes

Je pense que le plus important est d'obtenir la valeur après avoir changé l'état du redux plutôt que dans quel cycle de vie vous obtenez la valeur. donc pour obtenir la valeur, vous pouvez utiliser la méthode subscribe de redux dans componentDidMount

store.subscribe( ()=> {
  var updatedStoreState = store.getState();
})

3 commentaires

ne devrait probablement pas faire cela directement dans le composant

non pour autant que je sache, vous pouvez définir un abonnement ou un écouteur dans componentDidMount

Bien sûr, vous pouvez le faire, mais accéder directement au magasin dans un composant n'est pas recommandé

0
votes

Je pense que getDerivedStateForProps résoudrait votre problème.

static getDerivedStateFromProps(nextProps, prevState) {
  if(nextProps.data !== prevState.data) {
    //Do something
  } else {
    //Do something else
  }
}

Vous vérifieriez l'état du redux par rapport à l'état de votre composant, puis agiriez en conséquence.

Aussi , quelques informations de la documentation que vous pourriez considérer avant d'utiliser cette méthode:

1. getDerivedStateFromProps est invoqué juste avant d'appeler la méthode de rendu, à la fois lors du montage initial et lors des mises à jour suivantes .

2. Cette méthode existe pour de rares cas d'utilisation où l'état dépend de l'évolution des accessoires au fil du temps.

3. Si vous devez effectuer un effet secondaire (par exemple, une récupération de données ou une animation) en réponse à un changement d'accessoires, utilisez plutôt le cycle de vie componentDidUpdate. p >

Vous pouvez en savoir plus sur: https://reactjs.org/ docs / react-component.html # static-getderivedstatefromprops

5 commentaires

Ne fonctionne pas, getDerivedStateFromProps n'est pas appelé non plus

@ Infamous911 qu'entendez-vous par «n'est pas appelé»? La méthode est appelée automatiquement avant render ()

@kivul si les composants ne sont pas restitués, cela ne sert à rien

@kivul ouais le composant n'est pas rendu quand il le devrait

Quelqu'un at-il une réponse à cela ...? c'est presque juillet :(

1
votes

J'ai résolu mon problème en mettant à jour de la v0.56 de react-native à la v0.57. Apparemment, il y avait un problème avec react-redux v6 fonctionnant correctement dans l'environnement react-native v0.56.

2 commentaires

J'ai ce problème et j'utilise react-native v0.59 et react-redux v7.1.0. J'ai un accessoire «chargement» de mon magasin qui devrait déclencher un indicateur de chargement dans une vue de défilement lors de la récupération de données. rien de tout cela ne fonctionne atm

react-redux 7 utilise des hooks de réaction et ils ne sont pas disponibles en react-native pour le moment