ReactJS 표시 가져 오기 응답 onClick

Question

생성 단추를 누를 때 임의의 활동을 생성 할 수있는 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에 의해 제안으로 당

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 함수는 사용자가 클릭 할 때마다 상태를 업데이트하고 새로운 rerender가 발생하여 새로운 임의의 단어로 generateItem을 다시 호출합니다.

희망이 당신이 찾고있는 것입니다.