反应获取请求答案

【问题标题】：React Fetch Request反应获取请求
【发布时间】：2017-08-14 18:27:04
【问题描述】：

当我单击 App 组件中的“下一步”按钮时，我试图更改执行获取请求的站点，并传递另一个站点

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

             );
         }
     }

【问题讨论】：

标签： javascript reactjs get fetch axios

【解决方案1】：

试试这个代码：

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 事件（如果调用了组件更新的 fetch）并更改了 handleClick 方法。如果这能解决您的问题，请告诉我。

【讨论】：