서버에서 응답 반응 테이블을 만드는 방법

Question

목표는 서버 응답으로 테이블을 만드는 것입니다.

class ProductsTable extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     store: [] 
    }; 
    } 

    render() { 
    // this.setState({store:Parse()}) //<--- Q2 
    return (
     <div className='ProductsTable'> 
     <p>{this.state.store}</p> 
     </div> 
    ); 
    } 
}; 

Q1- 가게를 반환 (항목의 배열) :

function Parse() { 
    var store; 
    var request = 'http://localhost:3001/Products?city=0&shop=0'; 
    axios.get(request) 
    .then(function(response) { 
     store = response.data; 
     return store; //  <--- Q1 
    }) 
    .catch(function (error) { 
    () => { cl("Server Error: ", error) }; 
    }); 
} 

을 그리고 지금은 테이블을 만들어야합니다

는

응답의 코드는 (그것은 배열을 제공합니다)

Q2- 루프를 만들기 때문에 setState를 사용할 수 없습니다.

그리고 서버에 요청을하고 테이블을 업데이트 할 필요가 버튼 :

class LeftPanel extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     store: [] 
    }; 
    } 

    render() { 
    var funct = function(elem) { 
     <ProductsTable /> 
    } 
    return (
     <div className='PanelContent Center'> 
     <CreateButtons funct={funct} /> 
     </div> 
    ); 
    } 
}; 

class CreateButtons extends React.Component { 
    render() { 
    var rows = []; 
    rows.push(<TheButton source={source} funct={this.props.funct}/>); 
    return(<div className='MenuTable Center'>{rows}</div>); 
    } 
}; 

class TheButton extends React.Component { 
    render() { 
    elem = <button onClick={this.props.funct}></button>; 
    return <div>{elem}</div>; 
    } 
}; 

을하지만 하나의 작업 환경에서 그것을 확인하는 방법을 모르겠어요. setState는 어디에 두어야하나요? 어떻게 업데이트 할 수 있습니까? 고맙습니다.

검색에 관한 많은 정보를 찾았지만 프로젝트에서 제대로 작동하지 않습니다. React 구조에 대한 충분한 지식이 없습니다.

Answer 1

이 시도 :

먼저 ProductsTable 및 TheButton 바보 구성 요소 (어떤 상태)합니다. Parse()을 도우미 함수로 유지하고 이름을 fetchData()으로 바꿉니다.

function fetchData() { 
    return axios.get('http://localhost:3001/Products?city=0&shop=0') 
    .then(response => response.data); 
    .catch((err) => { cl("Server Error: ", err); throw err; }); 
} 

class ProductsTable extends React.Component { 
    render() { 
    return (
     <div className='ProductsTable'> 
     <p>{this.props.products}</p> 
     </div> 
    ); 
    } 
}; 

class TheButton extends React.Component { 
    render() { 
    return (
     <div> 
     <button onClick={this.props.onClick} /> 
     </div> 
    ); 
    } 
}; 

그런 다음 제어 로직을 부모 개체 LeftPanel에 넣습니다.

class LeftPanel extends React.Component { 
    constructor(props) { 
    super(props); 
    this.getData = this.getData.bind(this); 
    this.state = { store: [] }; 
    } 

    getData() { 
    fetchData().then((data) => this.setState({ store: data })); 
    } 

    render() { 
    return (
     <div className='PanelContent Center'> 
     <div className='MenuTable Center'> 
      <TheButton onClick={this.getData} /> 
     </div> 
     <ProductsTable products={this.state.store} /> 
     </div> 
    ); 
    } 
}; 

특정 요구 사항에 맞게 일부 세부 정보를 변경해야 할 수 있습니다.