Comprendre les changements d'état et d'accessoires lors de la redirection dans les composants de réaction

Question

J'ai un composant qui n'est pas rendu comme je l'aurais souhaité. Je m'inquiète moins de cet exemple spécifique que d'avoir une meilleure compréhension de la façon dont l'état, les accessoires, les mises à jour, le re-rendu et plus encore se produisent dans le cycle de vie de réaction-redux.

Mon code actuel concerne la création d'une livraison avec une liste d'emplacements. Le problème principal est que le réordonnancement de l'itinéraire de l'emplacement ne semble pas fonctionner - l'état est correctement mis à jour dans le réducteur, mais les composants ne sont pas redirigés.

Ceci est l'extrait pertinent de delivery.js, un composant qui utilise le composant personnalisé LocationSearch pour afficher chaque emplacement dans la liste des lieux:

{console.log("Rendering...")} 
{console.log(delivery.locations)} 
{delivery.locations.map((location, index) => (
    <div key={index}> 
     <LocationSearch 
      {...location} 
      total={delivery.locations.length+1} 
      index={index} 
     /> 
    </div> 
))} 

Les console.logs impriment les données correctes et où quand prévu. Lorsqu'une action de réorganisation des emplacements est déclenchée (à partir de LocationSearch), le journal de la console imprime la liste des emplacements avec les données mises à jour correctement. Cependant le composant n'affiche rien mis à jour.

Voici certaines parties pertinentes du composant LocationSearch:

export class LocationSearch extends Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      searchText: this.props.address 
     } 
     this.handleUpdateInput = this.handleUpdateInput.bind(this) 
    } 

    handleUpdateInput (searchText) { 
     this.setState({ 
      searchText: searchText 
     }) 
     this.props.handleUpdateInput(searchText) 
    } 

    render(){ 
     const { type, itineraryOrder, floors, elevator, accessDistance, index} = this.props 
     return (
      ...display all the stuff 
     ) 
    } 
} 
...map dispatch, connect, etc... 
function mapStateToProps(state, ownProps) { 
    return { 
     suggestions: state.delivery.suggestions, 
     data: ownProps.data 
    }; 
} 

C'est là que je deviens confus - je me dis que je suis censé faire quelque chose le long des lignes de componentWillUpdate, mais ne peut trouver bon explications pour ce qui se passe à chaque étape. Est-ce que je viens de mettre this.props = nextProps là-dedans? Est-ce que this.props ne devrait pas déjà avoir été mis à jour par le composant parent qui les a transmis? Comment se fait-il que la plupart des composants semblent se réincarner par eux-mêmes?

Toute aide que vous pouvez donner ou des liens vers de bonnes ressources que je vous serais reconnaissant. Merci d'avance!

Answer 1

J'ai continué à courir dans ce genre de problèmes juste avant que je découvre redux. Considérant que vous avez déjà mentionné l'utilisation de reac-redux, peut-être que vous devriez passer à une structure conteneur/composant et oublier componentWillUpdate()

Fondamentalement, ce que cela permet est de simplement passer des accessoires frais aux composants qui rendent le réel HTML, vous n'avez donc pas besoin de remplacer les accessoires à la main.

Votre conteneur pourrait être quelque chose comme ça

import React from 'react' 
import { connect } from 'react-redux' 
import PresentationalComponent from 'components/PresentationalComponent' 

const Container = props => <PresentationalComponent {...props} /> 

export default connect(state => ({ 
    searchText: state.UI.searchText, 
    locations: [...], 
}), dispatch => ({ 
    handleUpdateInput: e => dispatch({ 
     type: "CHANGE_SEARCH_TEXT", 
     text: e.target.value, 
    }), 
}))(Container) 

Et votre composant présentation

import React from 'react' 

const PresentationalComponent = ({ searchText, locations, handleUpdateInput }) => 
<div> 
    {locations.map(location => <p>{location}</p>)} 
    <input defaultValue={searchText} type="text" onChange={handleUpdateInput} /> 
</div> 

export default PresentationalComponent