Передача состояния в загрузчик асинхронных компонентов для обратного вызова и рендеринга - PullRequest
Новая
       15

Передача состояния в загрузчик асинхронных компонентов для обратного вызова и рендеринга

0 голосов
/ 28 декабря 2018

У меня есть набор компонентов Reacts, которые загружаются асинхронно для работы с большим набором данных.У меня есть начальный загрузчик, работающий через react-spinners BeatLoader, который работает нормально.Моя проблема возникает, когда я пытаюсь повторить этот эффект с сообщением Loading inventory... при попытке передать состояние productsLoading в его родительский компонент, как я это делал для состояния загрузки хранилища на уровне index.jsx.

Iдля этого только пытаюсь заставить работать обратный вызов в дочернем компоненте.

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.

1 Ответ

0 голосов
/ 28 декабря 2018
...