ReactJSディスプレイの読み込み応答onClick

Question

Imは、生成ボタンを押すとランダムなアクティビティを生成できるReactJSプロジェクトに取り組んでいます。私のAPIにフェッチをして、そこからデータを表示しています。これは正常に動作します。今、取得ボタンをクリックするたびに返されたデータを取得して表示します（ホームコンポーネントにあります）。したがって、生成ボタンはコンポーネントを新規に取得して更新する必要があります。また、デフォルトでは空でなければなりません。私はしばらく調べて、関連する回答を見つけることができません。皆さんのお手伝いができますか？ありがとう。

は私が正しくあなたを理解している場合、非常に確認していないコンポーネント

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

ホームコンポーネント

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

フェッチロジックをhomeコンポーネントに移動し、Itemlisterコンポーネントと同じように、homeコンポーネントの状態を維持するとします。それから、あなたの状態をItemlisterコンポーネントに渡すだけです。ご自宅のコンポーネントは

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

次のようになります。そして、あなたの ItemListerコンポーネントは、小道具を介してデータを表示するための責任があります。コメントで dubesの提案を1として

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

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

、あなたは、このコンポーネントでどのような状態を維持したくないなら、あなたはこの

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

Answer 2

を取得...しかし、あなたはあなたの反応内でフェッチ追加しているので、拡張クラスの場合は、次のようにホームコンポーネント内でレンダリングできます。

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

ユーザーがクリックするたびにonClick関数が状態を更新し、新しい再レンダリングが発生し、新しいランダムな単語でgenerateItemを再度呼び出します。

これはあなたが探していたものです。