Empêcher de réagir composant de rendu à deux reprises lors de l'utilisation de redux avec componentWillMount

J'ai une Réagir composant qui distribue un redux de modification de l'état dans son componentWillMount fonction. La raison en est que lorsque le composant est chargé, il doit obtenir le id à partir de l'url (alimenté par react-router), et de déclencher une action qui définit l'état que idde données de l'.

Ici est le composant:

class Editor extends React.Component {

    componentWillMount() {
        const { dispatch, params } = this.props
        dispatch(editItem(params.id))
    }

    render() {
        const item = this.props.item
        console.log("Editing", item)
    }
}

export default connect(state => ({item: state.item}))(Editor)

Le hic, c'est render est appelé deux fois. item est pas défini sur le premier appel, et valable sur le deuxième. Idéalement, il ne doit être appelé qu'une seule fois this.props.item existe réellement (après la editItem action a été distribué et exécuter).

Selon la Réagir docs: "Si vous appelez setState dans cette méthode, render() permettra de voir l'état mis à jour et sera exécutée qu'une seule fois malgré le changement d'état."

Dans redux, dispatch est l'équivalent d'appeler setState, car cela entraîne un changement d'état. Cependant, je devine quelque chose dans la façon connect fonctionne toujours provoque render être appelé deux fois.

Est-il un moyen de contourner cela en plus d'ajouter une ligne comme if (!item) return; ?

InformationsquelleAutor Luke Sapan | 2015-12-18
  1. 8

    Une chose que vous pouvez faire est de créer un ordre plus élevé composant qui gère le modèle de base de chargement d'un autre composant (ou aucun composant) avant de les accessoires nécessaires sont chargés.

    export const LoaderWrapper = function(hasLoaded, Component, LoaderComponent, onLoad) {
    return props => {
        if (hasLoaded(props)) {
            return <Component {...props} />
        }
        else {
            if (onLoad) onLoad(props)

            return { LoaderComponent ? <LoaderComponent /> : null }
        }
    }
}

    Ensuite, vous pouvez envelopper votre composant avant de le connecter pour obtenir le comportement désiré.

    export default connect(state => ({item: state.item}))(LoaderWrapper(
    ((props) => !!props.item),
    Editor,
    null,
    (props) => props.dispatch(editItem(props.params.id))
))

    Vous pourriez vouloir ajouter un peu de lancer de la magie pour s'assurer que vous pouvez composer ces sortes de fonctions wrapper plus joliment. Jetez un oeil à recomposer pour plus d'info.

    • return LoaderComponent ? <LoaderComponent /> : null
    InformationsquelleAutor bryanph
  2. 2

    Il semble comme il y a déjà un problème dans la réaction-redux bibliothèque.

    https://github.com/rackt/react-redux/issues/210

    InformationsquelleAutor Luke Sapan
  3. 0

    Ce n'editItem faire? Fait-il ajouter un élément à la redux de l'état ou est-il déjà là?

    Si c'est l'ajout, j'imagine ce qui se passe est que le rendu de cycle qui se passe avec le courant des accessoires, c'est à dire l'élément vide.
    Puis il s'est rendu à nouveau lorsque les accessoires ont changé, via le réglage de l'élément.

    Une approche pour la résolution de ce genre de chose est de créer un ordre plus élevé composant qui encapsule l'Éditeur et les appels, l'envoi d'action le rendu est bien définie sur un écran de chargement ou et div vide jusqu'à ce point est réglé. De cette façon, vous pouvez être assuré que l'Éditeur aura un élément.

    Mais sans savoir ce editItem n', c'est un peu dur de savoir. Peut-être que vous pourriez coller le code pour cela?

    InformationsquelleAutor kristian