在反应中加载数据时显示微调器

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 状态设置为 true 或 false 即可在其他地方使用加载程序组件的方法。 getMore()函数只有在执行getPossible(n)后才会触发Loader状态。

我认为这可能与加载程序仅在设置状态后才接收道具有关（或者可能不是！！）。我如何触发加载器 on/off ?!

Answer 1

如果您想在状态更新后执行某些操作 - 您可以像这样将回调传递给状态方法

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

这应该在调用 getPossible 之前设置状态 isLoading

Answer 2

有时问题出在 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})
    }
  }

在反应中加载数据时显示微调器

Show spinner when data is loading on react

state

loader

spinner

reactjs