データが反応しているときにスピナーを表示

Question

データを取得しているときにスピナーを表示するのに問題があります。私はstate.isLoadingを持っていますが、getdata.getPossible（）関数が起動する前にそれをtrueに設定することはできません。相続人は私が持っている：

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> 
    ); 
    } 
} 

そしてLoaderコンポーネントは、このようなものです：

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 
} 

私が達成したいどのようなことは、単に真isLoading状態を設定することにより、他の場所で使用するローダーコンポーネントのための方法でありますまたはfalse。 getMore（）関数は、getPossible（n）の実行後にのみローダー状態をトリガーします。

状態が設定された後にのみローダーが小道具を受け取ることと関係していると思います。どのようにローダーをオン/オフすることができますか？

Answer 1

あなたは状態が更新された後に何かをしたい場合は - 時には問題があるgetPossibleが

Answer 2

呼び出される前に、あなたはこれが状態isLoadingを設定する必要があり、この

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

のような状態メソッドへのコールバックを渡すことができますsetStateを配列決定する。試してみてください：

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

Answer 3

これはあなたのターゲットですか？

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