React + Redux - Déclencher la sélection onChange() au chargement initial

Question

Je suis nouveau dans React et Redux, alors pardonnez-moi si la réponse est triviale, mais après une recherche approfondie, je ne semble pas trouver une bonne réponse à cette question simple. J'ai plusieurs sélections en cascade où les données sont remplies en fonction de la sélection précédente. Tout fonctionne bien lorsque l'utilisateur change l'option sélectionnée. Cependant, je n'arrive pas à trouver comment déclencher l'événement onChange lorsque les données sont initialement chargées dans la première sélection ? Voici le composant simplifié :

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { locationActions } from '../../_actions';
import { Input, Col, Label, FormGroup } from 'reactstrap';

class HeaderSetup extends React.Component {
  constructor(props) {
    debugger;
    super(props);        
    this.state = { location: 'Select an Option'};
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.loading !== this.props.loading &&
        nextProps.success !== this.props.success &&
        !nextProps.loading && nextprops.success) {
      this.setState({ location: '' });
    }
  }

  onLocationChanged(e) {
    console.log(e.target.value);    
  }

  render() {
    const { locations } = this.props;
    return (
      <FormGroup row>
        <Label for="locations" sm={3}>Locations</Label>
        <Col sm={8}>
        {locations.items &&                    
          <Input type="select" name="locations" id="locations" 
                onChange={this.onLocationChanged} 
                value={this.state.location}>
              {locations.items.map((location, index) =>
                  <option key={location.id}>
                      {location.locationName}                                
                  </option>
              )}
          </Input>
          }          
        </Col>
      </FormGroup>       
    )
  }
}

function mapStateToProps(state) {
  debugger;
  const { locations } = state;
  return {
    locations
  };
}

export default connect(mapStateToProps)(HeaderSetup); 

Dois-je simplement le déclencher manuellement ? Si oui, quel est le meilleur endroit/la meilleure façon de le faire ? Toute aide est la bienvenue !

Answer 1

Puisque vous utilisez composants contrôlés ils doivent toujours refléter l'État. Dans votre onChange vous devez juste mettre à jour l'état et toutes les entrées doivent être mises à jour en conséquence.

Si vous mettez en place un exemple minimal de fonctionnement montrant ce problème, je pourrais être en mesure de fournir plus de détails.

Vous trouverez ci-dessous un exemple simple de la façon de procéder :

class App extends React.Component {
  state = {
    locations: []
  };
  componentDidMount() {
    setTimeout(() => { // simulate loading
      this.setState({
        loading: false,
        locations: [
          {
            id: 1,
            label: "Paris"
          },
          {
            id: 2,
            label: "Rome"
          }
        ]
      });
    }, 3000);
  }
  render() {
    return <MyForm locations={this.state.locations} initialLocation={2}/>;
  }
}

class MyForm extends React.Component {
  state = {
    initialLocation: null,
    location: ""
  };

  componentWillReceiveProps(nextProps) {
    this.setState({
      initialLocation: nextProps.initialLocation,
    })
  }

  onChange = e => {
    this.setState({
      location: e.target.value
    });
  };

  render() {
    const { locations } = this.props;
    return (
      <label>
        <div>Select a location:</div>
        {locations.length > 0 && (
          <select value={this.state.location || this.state.initialLocation} onChange={this.onChange}>
            {locations.map(({ id, label }) => (
              <option key={id} value={id}>
                {label}
              </option>
            ))}
          </select>
        )}
      </label>
    );
  }
}

ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>