ReactJS afficher la réponse d'extraction onClick

Question

Im travaillant sur un projet ReactJS où vous pouvez générer une activité aléatoire en appuyant sur le bouton générer. Je fais un aller chercher à mon API pour afficher des données. Cela fonctionne bien. Maintenant, je veux faire la récupération et afficher les données retournées chaque fois que je clique sur le bouton de génération (qui est dans le composant home). Le bouton générer doit donc faire une nouvelle extraction et actualiser le composant. De plus, il doit être vide par défaut. J'ai cherché un moment et je ne trouve pas de réponse pertinente. Est-ce que certains d'entre vous peuvent m'aider? Merci.

composante d'extraction

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 maison

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> 
    ) 
    } 
} 

Answer 1

Je dirais que vous déplacez votre logique de récupération au 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 dubes en commentaire, si vous ne voulez pas conserver tout état dans ce composant, vous pouvez faire ce composant fonctionnel comme celui-ci

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

Answer 2

Je ne suis pas tout à fait sûr si je comprends bien ... mais puisque vous ajoutez votre intérieur d'une réagir d'extraction classe étendue, vous pouvez le rendre dans le composant home comme suit:

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 cliquera dessus et un nouveau rerender se produira, appelant à nouveau generateItem avec un nouveau mot aléatoire.

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