React Fetch Request

David Vittori

I was trying to change the site to which I do the fetch request when I click the button Next in the App component, passing the other site

 <FilterableProductTable getSite={ this.state.active ? '/get_platfo
rms' : '/get_features' } />

but it is not working, it shows just the old information. I think is some asynchronous problem

export class FilterableProductTable extends React.Component {
         constructor(props) {
             super(props);
             this.state = {
                 posts: []
             };
         }
         fetch() {
             axios.get(this.props.getSite)
                 .then(res => {
                     this.setState({
                         posts: res.data.functionality
                     });
                 });
         }


         componentDidMount() {
             this.fetch();
             setTimeout(function(){this.fetch();}  , 5000);
         }
         render() {
             return (
                 <div>
                     <ProductTable products={this.state.posts} />
                 </div>
             );
         }
     }


     export class App extends React.Component {

         constructor(props){
             super(props);
             this.state= {active: true};
             this.handleClick = this.handleClick.bind(this);
         }

         handleClick() {
             this.setState(prevState => ({
                 active: !prevState.active
             }));
         }

         render() {
             return (
                 <div>
                     <FilterableProductTable getSite={ this.state.active ? '/get_platforms' : '/get_features' } />
                     <a className={ this.state.active ? 'button' : 'hidden' } onClick={this.handleClick}><span>Next</span></a>
                 </div>

             );
         }
     }

Iulian Iulian

try this code:

export class FilterableProductTable extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
             posts: []
         };
     }
     fetch() {
         axios.get(this.props.getSite)
             .then(res => {
                 this.setState({
                     posts: res.data.functionality
                 });
             });
     }

    componentDidUpdate(){  
        this.fetch();
    }

     componentDidMount() {
         this.fetch();
         setTimeout(function(){this.fetch();}  , 5000);
     }
     render() {
         return (
             <div>
                 <ProductTable products={this.state.posts} />
             </div>
         );
     }
 }


 export class App extends React.Component {

     constructor(props){
         super(props);
         this.state= {active: true};
         this.handleClick = this.handleClick.bind(this);
     }

     handleClick() {
         let newState = !this.state.active;
         this.setState({
             active: newState
         });
     }

     render() {
         return (
             <div>
                 <FilterableProductTable getSite={ this.state.active ? '/get_platforms' : '/get_features' } />
                 <a className={ this.state.active ? 'button' : 'hidden' } onClick={this.handleClick}><span>Next</span></a>
             </div>

         );
     }
 }

Changes from your version: caught componentDidUpdate event(if the component updated fetch is called) and changed the handleClick method. Let me know if this fixes your problem.

Collected from the Internet

Please contact [email protected] to delete if infringement.