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

Question

我有一组异步加载的React组件来处理大型数据集。我有一个通过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