在数据加载时显示微调器

Question

i'm having some trouble showing the spinner "" when i'm getting some data. I have a state.isLoading but i can't seem to set that to true before the getdata.getPossible() function starts. Heres what i have:

class GetData extends Component {
  constructor() {
    super();
    this.state = {
      lastdraw: {},
      alldraws: [],
      bets: [],
      isLoading: false,
      showBets: false 
    };
  }

  componentDidMount() {
    getdata.getLastResult().then((result) => {
      this.setState({lastdraw: result.data.drawns[0]})
    })
  }

  getMore() {
    this.setState({isLoading: !this.state.isLoading})
    this.setState({bets: getdata.getPossible(5), showBets: !this.state.showBets})
  }

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <h3>{moment(this.state.lastdraw.date).format('LL')}</h3>
        <div><span>{this.state.lastdraw.numbers}</span> + <span>{this.state.lastdraw.stars}</span></div>
        <Btn onClick={this.getMore.bind(this)}>Generate</Btn>
        {this.state.showBets ? this.state.bets.map((bet, i) => {return (<PossibleKey key={this.state.bets[i].key} bets={bet}/>)}) : null}
        <Loader show={this.state.isLoading}/>
      </div>
    );
  }
}

And the Loader component is like this:

function Loader(props) {
    return props.show ? (
        <div className='overlay'>
          <div className='leftEye'></div>
          <div className='rightEye'></div>
          <div className='mouth'></div>
          <p>The Universe is aligning. Please wait...</p>
        </div>
    ) : null
}

What i want to achieve is a way for the loader component to be used elsewhere just by setting the isLoading state true or false. The getMore() function only triggers the Loader state after it executes getPossible(n).

I think it may be something to do with the Loader receiving props only after state is set (or maybe not!!). How can i trigger the Loader on/off ?!

Answer 1

If you want to do something after state has updated - you can pass a callback to state method like this

getMore() {
  this.setState({isLoading: !this.state.isLoading}, () => {
    this.setState({bets: getdata.getPossible(5), showBets: !this.state.showBets})      
  })
}

This should set the state isLoading before getPossible is called

Answer 2

Sometimes the issue is sequencing the setState . Try this:

 getMore() {
    this.setState({isLoading: !this.state.isLoading}, () => {
      this.setState({bets: getdata.getPossible(5), showBets: !this.state.showBets})
    })
  }

Answer 3

Is this your target?

  getMore() {
    if (!this.state.isLoading) {
      this.setState({isLoading: !this.state.isLoading, bets: getdata.getPossible(5), showBets: !this.state.showBets})
    }
  }