React 中 Nothing was returned from render 错误

当我们忘记显式地从函数或类组件返回一个值时,就会发生“Nothing was returned from render”的 React 错误。 要解决该错误,请从我们的组件显式返回 JSX,使用带有箭头函数的隐式返回,或者如果我们不打算返回任何内容,则返回 null。

下面是产生上述错误的示例代码

// ⛔️ Error: Error: App(...): Nothing was returned
// from render. This usually means a return statement is missing.
const App = () => {
  <div>Hello world</div>; // ?️ forgot to use `return`
};

export default App;

我们使用箭头函数来定义组件,但使用大括号而不是圆括号,因此我们没有从 App 组件返回任何内容。

要解决这个问题,请确保从我们的组件返回 JSX。

const App = () => {
  return <div>Hello world</div>;
};

export default App;

上面的示例使用 return 语句从函数组件显式返回一些 JSX。

如果我们打算从组件中返回任何内容,则应该返回 null。

const App = () => {
  return null;
};

export default App;

如果我们的组件执行一些逻辑并且不需要渲染任何东西,请确保返回 null,因为隐式或显式返回 undefined 会导致错误。

如果要使用带有箭头函数的隐式返回,请确保使用圆括号而不是花括号。

const App = () => (
  <div>
    <div>Hello world</div>
  </div>
);

上面的示例显示了如何使用带有箭头函数的隐式返回。

如果我们显式使用 return 语句,但将括号放在下一行,我们也可能会收到错误。

function App() {
  return
    ( // ?️ parentheses should be on same line with return()
      <div>
        <div>Hello world</div>
      </div>
    )
}
export default App;

要解决这个问题,请将左括号与返回语句放在同一行。

function App() {
  return (
    <div>
      <div>Hello world</div>
    </div>
  );
}
export default App;

如果你的左括号放在下一行,引擎认为它是返回; 然后是下一行的一些不相关的代码。

React 组件只是函数,因此当我们不从函数返回值时,会隐式返回 undefined。

React 认为 null 返回值没问题,但如果我们的函数或类组件返回未定义,则会抛出错误。

总结

当我们忘记从函数或类组件中显式返回值时,就会发生“Nothing was returned from render”的 React 错误。 要解决该错误,请从您的组件显式返回 JSX,使用带箭头函数的隐式返回,或者如果您不打算返回任何内容,则返回 null。