Question

我有一组Reacts组件，这些组件可以异步加载以处理大型数据集。我有一个初始加载器，它通过react-spinners BeatLoader工作，工作正常。当我尝试在其父组件中传递productsLoading状态时尝试使用Loading inventory...消息复制此效果时，就像在index.jsx级别的仓库加载状态中一样，会出现我的问题。

我只是试图让回调在子组件中工作。

index.jsx：

import React from 'react'
import { withRouter } from 'react-router-dom'
import WarehouseDetails from './warehouse-details'
import { BeatLoader } from 'react-spinners';
;

class WarehouseReport extends React.Component {
  state = {
    warehouse: {
      name: '',
      sales: '',
      cost: ''
    },
    categories: [],
    products: [],
    warehouseLoading: true,   <<< top level loader
    categoriesLoading: true,
    productsLoading: true,   <<< component level
  }

  componentDidMount() {
    this.loadWarehouseInfo()
  }

  loadWarehouseInfo = () => {    
    return fetch(`//${window.location.host}/${this.props.match.params.account_id}/warehouse_info/${this.props.match.params.warehouse_id}`)
      .then(response => response.json())
      .then(json => {
        this.setState({
          warehouse: {
            name: json.warehouse_name,
            sales: json.warehouse_sale_total,
            cost: json.warehouse_cost_total
          },
          warehouseLoading: false
        }, this.loadCategoryInfo)
      }) 
  }

  loadCategoryInfo = () => {
    return fetch(`//${window.location.host}/${this.props.match.params.account_id}/warehouse_info/${this.props.match.params.warehouse_id}/categories`)
      .then(response => response.json())
      .then(json => {
        this.setState({
          categories: json,
          categoriesLoading: false
        }, this.loadProductInfo)
      })
  }

  loadProductInfo = () => {
    return fetch(`//${window.location.host}/${this.props.match.params.account_id}/warehouse_info/${this.props.match.params.warehouse_id}/category_products/${this.state.categories.map(category => category.id).join(',')}`)
    .then(response => response.json())
    .then(json => {
      this.setState({
        products: json,
        productsLoading: false,  <<<< setup states
        loading: false
      })
    })
  }

  render() {
    const { warehouse, categories, products, warehouseLoading } = this.state
    return <div>
      { warehouseLoading ?  <BeatLoader
        color={'#4db3bf'} 
      /> : <WarehouseDetails warehouse={warehouse} categories={categories} products={products} /> }
    </div>
  }
}

export default withRouter(WarehouseReport)

当我深入研究要为其设置加载器的组件时，我有以下提示：

category-details.jsx：

import React from 'react'
import ProductDetails from './product-details'
import NumberFormat from 'react-number-format';

 export default function CategoryDetails({ name, count, products, productsLoading }) {  
<<< state is passed down; passing state outside the curly brackets only replaces the following component with the loading statement/item) 

  return <div>
    <div><h3>{name}</h3></div>     
    <div>{count} products found</div>

    <h4>Products</h4>
    <table className="table">
      <thead>
      <tr>
        <th>Name</th>
        <th>Rental $</th>
        <th>Sale $</th>
      </tr>
      </thead>
    <tbody>

    { this.state.productsLoading ? 'Loading inventory...' : products.map(product => <ProductDetails
        {...product}
       />)  <<<< component-level loader here
    }
    </tbody>
    </table>  
  </div>
}

正确安装此装载机的正确方法是什么？谢谢您的宝贵时间，我仍然可以了解React中的状态。

Answer 1

我认为您正在寻找的东西是

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

将状态传递给异步组件加载器以进行回调和渲染

1 个答案: