顯示微調數據加載時反應

我有一些麻煩顯示微調「」當我收到一些數據。我有一個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 
}

我想要實現的是對Loader組件在其他地方使用的方法只是通過設置isLoading狀態真或錯誤。 getMore（）函數在執行getPossible（n）後僅觸發Loader狀態。

我認爲這可能與Loader只有在設置了狀態（或者不是!!）之後才能接收道具有關。我怎樣才能觸發裝載機開啓/關閉？！

來源

2017-03-08 talvasconcelos

如果你想狀態已經更新完畢後做一些事情 - 你可以傳遞一個回調狀態的方法是這樣

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

這應該設置狀態isLoading之前getPossible被稱爲

來源

2017-03-08 15:06:10

我把你的建議，並提出這一點，一個單擊處理程序：'handleClick（）{ this.setState（（prevState，道具）=>（{ isloading：真 }）） getdata.getPossible（ 5）。然後（結果=> { this.setState（（prevState，道具）=>（{ 賭注：結果 }）） }）。然後（（完成）=> { this.setState（（ prevState，props）=>（{isloading：false }）） }） }'。它的工作原理並不是有史以來最優雅的代碼，而是承諾。否則，我將不得不提升裝載狀態到父組件，甚至進一步並作爲道具傳遞下去。 – talvasconcelos

你可以看到所有的代碼：https://github.com/talvasconcelos/millions – talvasconcelos

有時候問題是測序setState。試試這個：

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

來源

2017-03-08 15:06:24 NealVDV

大聲笑！我們回答了同樣的該死的東西 –

我已經嘗試過，沒有運氣！ :(再次運行getPossible，然後觸發加載程序 – talvasconcelos

@ArshabhAgarwal haah：D – NealVDV

這是你的目標嗎？

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

來源

2017-03-08 20:14:18

是的，我想要做的是將加載狀態設置爲true，然後運行getdata.getPossible – talvasconcelos

在我的版本代碼檢查isLoading的下一個狀態，然後運行getPossible，並在set isLoading期間執行此操作。這樣，設置狀態的順序就不那麼重要了，我想，在工作setState方法之後所有的數據都是正確的（如果你不使用isLoading裏面getPossible，這樣可以運行getPossible（isLoading） - where isLoading =！this.state.isLoading並在運行setState之前設置它:)） –

顯示微調數據加載時反應

回答

相關問題