React+Redux Toolkit中API请求失败时如何隐藏加载动画

你的核心问题是API请求失败后，Error组件内的spinner图片没有隐藏，并非Loading组件的isLoading状态异常——因为当请求失败时，Redux状态中isLoading已变为false，TopMenu组件会切换到渲染Error组件，Loading组件此时已经被卸载，你看到的spinner来自Error组件，而非Loading组件。

问题根源 #

Error组件中的spinner图片是硬编码的src属性，没有根据isLoading状态控制显示与否：

// Error.jsx 原代码
<img
  className="spinner"
  src="https://static.wixstatic.com/media/2c0034_280b36bae7e24fdf9132a5d010c02061~mv2.png"
  alt=""
/>

解决方案 #

你需要让Error组件根据isLoading状态控制spinner的显示，有两种实现方式：

方式一：通过props传递isLoading状态

1. 修改TopMenu组件，在渲染Error时传入isLoading：

// TopMenu.jsx
if (isError) {
  return <Error isError={isError} isLoading={isLoading} />;
}

2. 修改Error组件，根据isLoading判断是否渲染spinner：

// Error.jsx
const Error = ({ isError, isLoading }) => {
  return (
    <>
      <div className="dvError my-3 text-center">
        <div className="container-fluid">
          <div className="row">
            <div className="col-12 py-3">
              {isLoading && (
                <img
                  className="spinner"
                  src="https://static.wixstatic.com/media/2c0034_280b36bae7e24fdf9132a5d010c02061~mv2.png"
                  alt=""
                />
              )}
              <p className="text-capitalize">
                Whoops, We apologize for the inconvenience.
                <b className="d-block text-uppercase">{isError}</b>
              </p>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

方式二：在Error组件中直接读取Redux状态

如果不想通过props传递，可以直接在Error组件中使用useSelector获取isLoading状态：

// Error.jsx
import React from "react";
import { useSelector } from "react-redux";

const Error = ({ isError }) => {
  const { isLoading } = useSelector(state => state.topmenuReducer);
  return (
    <>
      <div className="dvError my-3 text-center">
        <div className="container-fluid">
          <div className="row">
            <div className="col-12 py-3">
              {isLoading && (
                <img
                  className="spinner"
                  src="https://static.wixstatic.com/media/2c0034_280b36bae7e24fdf9132a5d010c02061~mv2.png"
                  alt=""
                />
              )}
              <p className="text-capitalize">
                Whoops, We apologize for the inconvenience.
                <b className="d-block text-uppercase">{isError}</b>
              </p>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

额外说明 #

你之前误以为Loading组件的isLoading状态异常，是因为请求失败时TopMenu组件已经切换到渲染Error组件，Loading组件会被卸载，你看到的console.log日志是组件卸载前的旧输出，并非当前状态。

内容的提问来源于stack exchange，提问作者me at stackoverflow