web-dev-qa-db-fra.com

ReactJS affiche la réponse de récupération surClick

Je travaille sur un projet ReactJS où vous pouvez générer une activité aléatoire en appuyant sur le bouton Générer. Je fais une recherche sur mon API pour en afficher des données. Cela fonctionne bien. Maintenant, je veux faire l'extraction et afficher les données renvoyées chaque fois que je clique sur le bouton Générer (qui se trouve dans le composant home). Le bouton générer doit donc effectuer une nouvelle extraction et actualiser le composant. Il doit également être vide par défaut. J'ai cherché un moment et je ne trouve pas de réponse pertinente. Certains d'entre vous peuvent-ils m'aider? Merci.

récupérer le composant

import React from "react";

export class ItemLister extends React.Component {
    constructor() {
        super();
        this.state = { suggestion: "" };
    }

    componentDidMount() {
        fetch("......./suggestions/random", {
            method: "GET",
            dataType: "JSON",
            headers: {
                "Content-Type": "application/json; charset=utf-8"
            }
        })
            .then(resp => {
                return resp.json();
            })
            .then(data => {
                this.setState({ suggestion: data.suggestion });
            })
            .catch(error => {
                console.log(error, "catch the hoop");
            });
    }

    render() {
        return <h2>{this.state.suggestion}</h2>;
    }
}

composant home

import React from "react";
import { ItemLister } from "./apiCall";

export class Home extends React.Component {
    constructor(props) {
        super(props);
        console.log();
        window.sessionStorage.setItem("name", this.props.params.name);
        window.sessionStorage.setItem("token", this.props.params.token);
    }

    render() {
        return (
            <div className="contentContainer AD">
                <table>
                    <thead>
                        <tr>
                            <th>
                                <p>Het is heel leuk als het werkt!</p>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <ItemLister />
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div className="container center">
                    <button>GENERATE</button>
                    <button>SAVE</button>
                    <button>MATCH</button>
                </div>
            </div>
        );
    }
}
reactjsfetch
7
Steven van Eck

Je dirais que vous déplacez votre logique d'extraction vers le composant home et maintenez un état dans le composant home comme vous le faites dans le composant Itemlister. Ensuite, tout ce que vous avez à faire est de passer votre état au composant Itemlister. Votre composant maison ressemblera à ceci

export class Home extends React.Component {
constructor(props) {
    super(props)
    this.state = {suggestion: ""}
    ...
}

componentDidMount(){
  // For initial data
  this.fetchData();
}

fetchData = () => {
  fetch("......./suggestions/random", {
    method: "GET",
    dataType: "JSON",
    headers: {
      "Content-Type": "application/json; charset=utf-8",
    }
  })
  .then((resp) => {
    return resp.json()
  }) 
  .then((data) => {
    this.setState({ suggestion: data.suggestion })                    
  })
  .catch((error) => {
    console.log(error, "catch the hoop")
  })
}

render() {
    return (
        ...
                <tbody >
                   // Pass state to itemlister like this
                    <tr><td><ItemLister suggestion={this.state.suggestion}/></td></tr>
                </tbody>
            </table>
            <div className="container center">
                // Add event handler here. On every click it will fetch new data
                <button onClick={this.fetchData}>GENERATE</button>
                <button>SAVE</button>
                <button>MATCH</button>
            </div>
        </div>
    )
  }
}

Et votre composant ItemLister a la responsabilité d'afficher les données via des accessoires.

export class ItemLister extends React.Component {
    constructor() {
    super();
    }

    render() {
    return(
      <h2> 
        {this.props.suggestion}
      </h2>
      )
     }
    }

Selon la suggestion de dubes en commentaire, si vous ne voulez pas conserver d'état dans ce composant, vous pouvez créer ce composant fonctionnel comme ceci

function ItemLister(props) {
  return <h2> 
            {props.suggestion}
          </h2>;
}
9
Prakash Sharma

Je ne sais pas trop si je vous ai bien compris ... mais puisque vous ajoutez votre extraction dans une classe étendue react, vous pouvez la rendre à l'intérieur du composant home comme ceci:

  state = {
    visible: false
  }

  generateItem() {
    if (this.state.visible) {
      return <ItemLister />
    }
    return <h2>nothing to show</h2>
  }

  render() {
    return(
      <div>
        <button onClick={() => this.setState({visible: true})}>Click</button>
        {this.generate()}
      </div>
    )
  }

La fonction onClick mettra à jour l'état à chaque fois que l'utilisateur clique dessus et un nouveau rendu se produira, appelant ainsi de nouveau generateItem avec un nouveau mot aléatoire.

J'espère que c'est ce que vous cherchiez.

2
Ray