Question

我正在尝试通过获取API和产品中的产品数量来设置分页数。将此号码存储在州内。

这是我的代码：

class AdminProducts extends Component {
    constructor(props) {
        super(props);
        this.state = {
          page: 1,
        };
        this.onPageChange = this.onPageChange.bind(this);

        this.product = new Products();


        this.calculateNumberOfPages = this.calculateNumberOfPages.bind(this); 
      }
      componentWillMount(){
        this.product.getProductsAmount().then(
            (val) => this.calculateNumberOfPages(val)
        );
      }

      async calculateNumberOfPages(_total_amount_products){
            // console.log(_total_amount_products); 
            await this.setState({total: Math.ceil(_total_amount_products/9)});  
      }

      onPageChange(page) {
          console.log(page); 
        this.setState({page: page});
      }

    render(){
        return(
            <Col md={10}>
                <Row>

                <Col md={12}>
                    <div className='float-right'> 
                        {console.log(this.state.total)}
                        <UltimatePagination 
                            currentPage={this.state.page} 
                            totalPages={this.state.total} 
                            onChange={this.onPageChange}
                        />
                    </div>
                </Col>
                </Row>

            </Col> 

        )
    }
}

this.products是一个单独的类，它将 async 方法放入我的API类中。

问题是在加载组件之前状态未更新。如何在呈现组件之前更新状态，或者如何等待setState方法的异步调用完成

Answer 1

你做不到。但是你可以通过设置一个调用isFetching的状态来做类似的事情。当您在API上获得产品时，只需将isFetching设置为false并渲染即可。如果isFetching is true您可以显示微调器或不显示任何内容。这是例子

this.state = {
   page: 1,
   isFetching: true,
};

componentWillMount(){
   this.product.getProductsAmount().then(
      (val) => this.calculateNumberOfPages(val);
      this.setState({isFetching: flase});
   );
}

in render

render(){
   if(this.state.isFetching) {
      return <div/>
   }
   return(
      <Col md={10}>
        ....
   )
}

如何在调用setState后直接更新状态

1 个答案: