2017-03-22 59 views
0

我试图改变这一点我找取请求的网站时,我点击按钮的应用程序组件接下来,通过其他网站阵营获取请求

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

,但它不工作,就说明只是旧的信息。我认为这是一些异步问题

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> 

      ); 
     } 
    } 

回答

0

试试这个代码:

从您的版本
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> 

     ); 
    } 
} 

变化:抓住componentDidUpdate事件(如更新组件提取所调用),改变了handleClick方法。让我知道这是否可以解决您的问题。