刷新页面时，react.js 中未显示 spinner.gif 文件

Question

我按照 Udemy 课程为开发人员建立了一个网站。 当用户登录时，我需要加载他/她的个人资料。 加载配置文件时，需要在 UI 中显示微调器 gif。 在我放了微调器 gif 之后，当我刷新页面时，我得到一个空白的。 在 redux 开发工具上，刷新前我得到了 user_loaded 和 get_profile 状态，但刷新后我只得到 user_loaded 或 auth_error。 mern 堆栈对我来说是新的，我不知道该怎么做。 但它在教程中有效，我写的正是他们所做的。

spinner.js 文件

import React from "react";
 import spinner from './spinner.gif';

export default () => {
     
        <img 
         src={spinner}
         styles={{ width: '200px', margin: 'auto', display: 'block'}}
         alt='loading...'
         />
     
}

仪表板.js 文件

    import React, { Fragment, useEffect } from 'react';
    import PropTypes from 'prop-types';
    import { connect } from 'react-redux';
    import { getCurrentProfile } from '../../actions/profile';
    import Spinner from '../layout/Spinner';

const Dashboard = ({
  getCurrentProfile,
  auth,
  profile: { profile, loading },
}) => {
  useEffect(() => {
    getCurrentProfile();
  }, []);

  return loading && profile === null ? <Spinner /> : <Fragment>test</Fragment>;
};

Dashboard.propTypes = {
  getCurrentProfile: PropTypes.func.isRequired,
  auth: PropTypes.func.isRequired,
  profile: PropTypes.func.isRequired,
};

const mapStateToProps = state => ({
  auth: state.auth,
  profile: state.profile,
});

export default connect(mapStateToProps, { getCurrentProfile })(Dashboard);

profile.js

import { GET_PROFILE, PROFILE_ERROR } from "../actions/types";

 const initialState = {
     profile:null,
     profiles: [],
     repos: [],
     loading: true,
     error: {},
 }

 export default function(state = initialState,action) {
     const {type,payload} = action;

    switch (type) {
        case GET_PROFILE:
            return {
                ...state,
                profile: payload,
                loading: false
            }
            case PROFILE_ERROR:
                return{
                    ...state,
                    error: payload,
                    loading:false
                }       
        default:
            return state;
    }

 }

package.json 文件在反应

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.24.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "5.0.0",
    "redux": "^4.1.2",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.4.1",
    "uuid": "^8.3.2",
    "web-vitals": "^2.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:5000"
}

在重新加载页面之前，这就是我得到的

重新加载页面后没有显示

Answer 1

这是我的错误，我忘记将 gif 放在片段中

import React, { Fragment } from 'react';
import spinner from './spinner.gif';

    export default () => (
      <Fragment>
        <img
          src={spinner}
          style={{ width: '200px', margin: 'auto', display: 'block' }}
          alt='Loading...'
        />
      </Fragment>
    );