-1

I have one child component Listing which will get state variable this.state.loading as prop, it will be used to repull data from the server. along with this state variable, i have two more state variables which controls button properties where it is been refreshed or not. My problem is state variables in component is not getting updated when the button is clicked. I see REST calls are being called, however second REST call doesn't appear to be working. Second Rest Call works if i just call on the browser. pls check why state variables are not getting updated and why second Rest api works on the browser and not in this program. Thanks


class App extends React.Component{
  state ={
    loading:false,
    childload:true,
    placeholder:'',
  };

  enterLoading = () => {
  
    this.setState( ()=> {
      return {
        loading: true,
        placeholder:'Refresh started',
        childload:false,
      };
    });
    
    fetch("api/doScrape")
      .then(response => {
        if (response.status > 400) {
          return this.setState(() => {
            return { placeholder: "Something went wrong during Scraping data" };
          });
        }
        
      });
    

    fetch("api/doCalc")
    .then(response => {
      if (response.status > 400) {
        return this.setState((placeholder) => {
          return { placeholder: "Something went wrong during Vix Calc!" };
        });
      }
    });

    this.setState(() => {
      return {
        loading: false,
        childload:true,
        placeholder:'',
      };
      });
    

    
    
  };

  

  render()
  {
    return (<div className="App">
    <h1> Calculations</h1>
    <Button type="primary" loading={this.state.loading} onClick={() => this.enterLoading()}>
          Refresh
        </Button>{this.state.placeholder}
    <Listing loading={this.state.childload}/> 
    
  </div>);

  }

}

export default App;

1 Answer 1

0

The variables work fine. You just don't know how the async tasks work. See, you set the initial state in the start of the function. After some ASYNC calls, you set these variables instead of another value. This is why your function doesn't work.

enterLoading = () => {
  
  // THERE
    this.setState( ()=> {
      return {
        loading: true,
        placeholder:'Refresh started',
        childload:false,
      };
    });
    
    fetch("api/doScrape")
      .then(response => {
        if (response.status > 400) {
          return this.setState(() => {
            return { placeholder: "Something went wrong during Scraping data" };
          });
        }
        
      });
    

    fetch("api/doCalc")
    .then(response => {
      if (response.status > 400) {
        return this.setState((placeholder) => {
          return { placeholder: "Something went wrong during Vix Calc!" };
        });
      }
    });

//AND THERE
    this.setState(() => {
      return {
        loading: false,
        childload:true,
        placeholder:'',
      };
      });
    

    
    
  };
1
  • Thanks for your feedback, i am new to React. I got your point, i missed the part fetch is async call. I added with serious of .then() functions. Now it is acting correctly. Thanks again. Jul 6, 2020 at 22:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.