J'ai un composant appelé Nav. Je souhaite envoyer des accessoires à un autre composant appelé Body lorsque l'utilisateur utilise des types dans une barre de recherche. Le problème que je rencontre est que la valeur du composant Body ne change pas lorsque je tape dans la barre de recherche.

La classe Nav :

constructor(props) {
  super(props);
  this.state = { id: "" };

  this.handleChange = this.handleChange.bind(this);
}

handleChange = event => {
  this.setState({ id: event.target.value });
};

render() {
  return (
    <div>
      <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
        <button
          className="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarTogglerDemo03"
          aria-controls="navbarTogglerDemo03"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon" />
        </button>

        <a className="navbar-brand" href="#">
          <img src="https://icon-icons.com/icons2/1412/PNG/48/comics-spiderman-cam_97492.png" />
          Home
        </a>

        <div className="collapse navbar-collapse" id="navbarTogglerDemo03">
          <ul className="navbar-nav mr-auto mt-2 mt-lg-0">
            <li className="nav-item active">
              <a className="nav-link" href="#">
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="#">
                Link
              </a>
            </li>
            <li className="nav-item">
              <a
                className="nav-link disabled"
                href="#"
                tabindex="-1"
                aria-disabled="true"
              >
                Disabled
              </a>
            </li>
          </ul>
          <form
            className="form-inline my-2 my-lg-0"
            onSubmit={() => {
              console.log(this.state.id);
            }}
          >
            <input
              className="form-control mr-sm-2"
              type="search"
              placeholder="Search"
              aria-label="Search"
              value={this.state.id}
              onChange={this.handleChange}
            />
            <button className="btn btn-light" type="submit">
              Search
            </button>
          </form>
        </div>
      </nav>
      <Body valorId={this.state.id} />
      {alert(this.state.id)}
    </div>
  );
}

La classe du corps :

constructor(props) {
  super(props);
  this.state = { heroe: null, loading: true };
}

async componentDidMount() {
  const url = "https://superheroapi.com/api/2132321/" + this.props.valorId;
  console.log("aca va:" + this.props.valorId);
  alert(url);
  const response = await fetch(url);
  const data = await response.json();
  console.log(data.name);
  this.setState({ heroe: data, loading: false });
}

Je vous remercie.

0
canemarcovaro 18 mars 2019 à 20:22

2 réponses

Meilleure réponse

componentDidMount ne s'exécutera que lors du premier montage du composant. Vous pouvez plutôt déplacer la logique vers une méthode distincte et l'appeler à la fois dans componentDidMount et dans componentDidUpdate lorsque la prop valorId change.

Exemple

class Body extends React.Component {
  constructor(props) {
    super(props);
    this.state = { heroe: null, loading: true };
  }

  componentDidMount() {
    this.loadHeroe();
  }

  componentDidUpdate(prevProps) {
    if (this.props.valorId !== prevProps.valorId) {
      this.loadHeroe();
    }
  }

  loadHeroe = async () => {
    this.setState({ loading: true });

    const url = "https://superheroapi.com/api/2132321/" + this.props.valorId;
    const response = await fetch(url);
    const data = await response.json();

    this.setState({ heroe: data, loading: false });
  };

  render() {
    // ...
  }
}
3
Tholle 18 mars 2019 à 17:30

Le problème est que vous utilisez componentDidMount Cette fonction est appelée une seule fois, au montage du composant.

Essayez d'utiliser componentDidUpdate à la place

1
Sushanth -- 18 mars 2019 à 17:56