Fetch Reagieren anfordern

Question

Ich habe versucht, die Website zu ändern, zu dem ich die Anfrage holen, wenn ich auf die Schaltfläche Weiter in der Komponente App klicken, wird die andere Seite

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

vorbei, aber es funktioniert nicht, es zeigt, nur die alten Informationen. Ich denke, ist es, einige asynchrone 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> 

      ); 
     } 
    } 

Answer 1

diesen Code versuchen:

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> 

     ); 
    } 
} 

Änderungen von Ihrer Version: gefangen componentDidUpdate Ereignis (wenn die Komponente aktualisiert Abrufs genannt wird) und änderte die Methode handle. Lassen Sie mich wissen, ob dies Ihr Problem behebt.