Question

我在显示微调器时遇到了一些麻烦＆＃34;＆＃34;当我得到一些数据时。我有一个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来将loader组件用于其他地方的方法。 getMore（）函数只在执行getPossible（n）后触发Loader状态。

我认为这可能与Loader仅在状态设置（或者可能不是!!）后接收道具有关。如何开启/关闭装载机？！

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

在加载数据时显示微调器

3 个答案: