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。

火焰兔

海报 链接