显示微调数据加载时反应

我有一些麻烦显示微调“”当我收到一些数据。我有一个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之前设置它:)） –

显示微调数据加载时反应

回答

相关问题