React Progressbar не отображается?

Question

Я создал индикатор выполнения React с помощью библиотеки третьей части

import React from "react";
import { css } from "@emotion/core";
import ClipLoader from "react-spinners/ClipLoader";
 
 
// Can be a string as well. Need to ensure each key-value pair ends with ;
const override = css`
  display: block;
  margin: 0 auto;
  border-color: red;
`;
 
class AwesomeComponent extends React.Component {
  constructor(props) {
    
    super(props);
    this.state = {
      loading: true
    };
  }
 
  render() {
    return (
        
      <div className="sweet-loading">
        <ClipLoader
          css={override}
          size={150}
          color={"#123abc"}
          loading={this.state.loading}
        />
      </div>
    );
  }
}
export default AwesomeComponent;

, а затем импортирую в index. js файл

import AwesomeComponent from './awesomeComponent.js';

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
      <AwesomeComponent />
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

В моем приложении я хочу показывать эту прогрэбар при загрузке данных из nodejs api или при нажатии любой кнопки .. Но в GUI ничего не отображается, связанного с прогрессбаром.

Answer 1

В этом примере вы можете увидеть, как вы можете изменить видимость вашего счетчика, только что изменившего локальное состояние, нажав кнопку

https://codesandbox.io/s/modern-monad-4tipc?file= / src / AwesomeComponent. js

Answer 2

Если вы используете компонент на основе классов для react-promise-tracker, тогда вам нужно использовать HO C promiseTrackerHoc:

import React from "react";
import { css } from "@emotion/core";
import ClipLoader from "react-spinners/ClipLoader";
import { promiseTrackerHoc } from "react-promise-tracker"; // <--------- HERE
  
// Can be a string as well. Need to ensure each key-value pair ends with ;
const override = css`
  display: block;
  margin: 0 auto;
  border-color: red;
`;
 
class AwesomeComponent extends React.Component {
  constructor(props) {
    
    super(props);
    this.state = {
      loading: true
    };
  }
 
  render() {
    return (
        this.props.promiseInProgress && // <--------- HERE
        <div className="sweet-loading">
            <ClipLoader
            css={override}
            size={150}
            color={"#123abc"}
            loading={this.state.loading}
            />
        </div>
    );
  }
}
export default promiseTrackerHoc(AwesomeComponent); // <--------- HERE

РАБОЧАЯ ДЕМО:

Note :

You can checkout DO C, поскольку они все объяснили, я думаю, вы можете помочь вам выяснить, какой сценарий вы хотите реализовать