React添加Spinner组件报渲染无返回值错误，该如何排查解决？

问题原因 #

你的Spinner组件缺少返回语句，是触发报错的直接原因：你定义Spinner的箭头函数使用大括号{}包裹代码块，但没有显式写return返回要渲染的JSX元素，React渲染组件时无法拿到有效输出，就抛出了对应错误。

修复方案 #

修改Spinner.js代码即可，以下两种写法任选一种：

写法1：显式添加return语句

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

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

export default Spinner;

写法2：用隐式返回简化写法

如果组件仅需要返回JSX无其他逻辑，可以去掉大括号和return，用小括号包裹要返回的JSX即可：

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;

内容的提问来源于stack exchange，提问作者user10626935