ReactJS | 組件中的加載狀態不會呈現Spinner

Question

我正在嘗試制作一個React組件，該組件根據道具和狀態顯示多個渲染。 所以，當我等待承諾被解決時，我想顯示一個微調組件

主要渲染圖：

1. NoResource Component =>當用戶無效時
2. 微調組件=>在所有渲染上加載時
3. BasicRender Component =>當獲取數據且未加載數據時

以下是我的組件：

/* eslint-disable react/prefer-stateless-function */
import React, { Component, Fragment } from 'react';
import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';

import { getUser, listUsers } from '../../config/service';

export class UserDetailsScreen extends Component {
  static propTypes = {
    match: PropTypes.shape({
      isExact: PropTypes.bool,
      params: PropTypes.object,
      path: PropTypes.string,
      url: PropTypes.string
    }),
    // eslint-disable-next-line react/forbid-prop-types
    history: PropTypes.object,
    label: PropTypes.string,
    actualValue: PropTypes.string,
    callBack: PropTypes.func
  };

  state = {
    user: {},
    error: '',
    isloading: false
  };

  componentDidMount() {
    this.fetchUser();
    this.setState({ isLoading: true})
  }

  getUserUsername = () => {
    const { match } = this.props;
    const { params } = match;
    return params.username;
  };

  fetchUser = () => {
    getUser(this.getUserUsername())
      .then(username => {
        this.setState({
          user: username.data,
          isloading: false
        });
      })
      .catch(({ message = 'Could not retrieve data from server.' }) => {
        this.setState({
          user: null,
          error: message,
          isLoading: false
        });
      });
  };

  validateUsername = () =>
    listUsers().then(({ data }) => {
      const { match } = this.props;
      if (data.includes(match.params.username)) {
        return true;
      }
      return false;
    });

  // eslint-disable-next-line no-restricted-globals
  redirectToUsers = async () => {
    const { history } = this.props;
    await history.push('/management/users');
  };

  renderUserDetails() {
    const { user, error } = this.state;
    const { callBack, actualValue, label, match } = this.props;

    return (
      <div className="lenses-container-fluid container-fluid">
        <div className="row">
          .. More Content ..
          {user && <HeaderMenuButton data-test="header-menu-button" />}
        </div>
        {user && this.validateUsername() ? (
          <Fragment>
           .. Content ..
          </Fragment>
        ) : (
          <div className="container-fluid">
            {this.renderNoResourceComponent()}
          </div>
        )}
        <ToolTip id="loggedIn" place="right">
          {user.loggedIn ? <span>Online</span> : <span>Oflline</span>}
        </ToolTip>
      </div>
    );
  }

  renderNoResourceComponent = () => {
    const { match } = this.props;
    return (
      <div className="center-block">
        <NoResource
          icon="exclamation-triangle"
          title="Ooops.."
          primaryBtn="« Back to Users"
          primaryCallback={this.redirectToUsers}
        >
          <h5>404: USER NOT FOUND</h5>
          <p>
            Sorry, but the User with username:
            <strong>{match.params.username}</strong> does not exists
          </p>
        </NoResource>
      </div>
    );
  };

  renderSpinner = () => {
    const { isLoading, error } = this.state;
    if (isLoading && error === null) {
      return <ContentSpinner />;
    }
    return null;
  };

  render() {
    return (
      <div className="container-fluid mt-2">
        {this.renderSpinner()}
        {this.renderUserDetails()}
      </div>
    );
  }
}

export default withRouter(UserDetailsScreen);

問題是：我將微調器與主要組件一起使用，並且出現此錯誤： Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. 。 你能告訴我我做錯了嗎？

Answer 1

該錯誤是因為即使您的API調用處於加載狀態，您也正在運行renderUserDetailsComponent 。 您只能在加載狀態下渲染微調器

renderUserDetails() {
    const { user, error, isLoading } = this.state;
    if(isLoading) {
        return null;
    }
    const { callBack, actualValue, label, match } = this.props;

    return (
      <div className="lenses-container-fluid container-fluid">
        <div className="row">
          .. More Content ..
          {user && <HeaderMenuButton data-test="header-menu-button" />}
        </div>
        {user && this.validateUsername() ? (
          <Fragment>
           .. Content ..
          </Fragment>
        ) : (
          <div className="container-fluid">
            {this.renderNoResourceComponent()}
          </div>
        )}
        <ToolTip id="loggedIn" place="right">
          {user.loggedIn ? <span>Online</span> : <span>Oflline</span>}
        </ToolTip>
      </div>
    );
  }