错误：Spinner(...)：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null

Question

我是新手。我试图在我的应用程序中添加 Spinner，但出现此错误。 错误：Spinner(...)：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null。

提前致谢

仪表板.js

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

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

  return loading && profile === null ? (
    <Spinner />
  ) : (
    <Fragment>
      <h1 className='large text-primary'>Dashboard</h1>
      <p className='lead'>
        <i className='fas fa-user' />
        Welcome {user && user.name}
      </p>
    </Fragment>
  );
};

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

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

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

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

Spinner.js

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

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

export default Spinner;

Answer 1

在您的 Spinner.js 文件中，您需要返回 Spinner 组件

例如

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

Answer 2

尝试在 return 语句中引入 loading && profile == NULL 语句。

return ( loading && profile === null ? 
<Spinner /> :
<Fragment>
  <h1 className='large text-primary'>Dashboard</h1>
  <p className='lead'>
    <i className='fas fa-user' />
    Welcome {user && user.name}
  </p>
</Fragment>
);

Answer 3

在 Spinner.js 中，方法周围的括号表示不返回内容。删除它们或添加 return 语句以返回片段。

例如：

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

或

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