サーバーからの応答反応テーブルの作成方法

Question

目的はサーバーの応答でテーブルを作成することです。

応答のコード（これは、配列を与える）：

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

そして今、私はテーブルを作成する必要があります。

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-は（項目の配列を）ストアを返している

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

しかし、私は1つの作業のコンテキストでそれを作る方法がわかりません。 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> 
    ); 
    } 
}; 

特定のニーズに合わせて詳細を変更する必要がある場合があります。