React 中的渲染错误未返回任何内容 [已解决]

React 中的渲染错误没有返回任何内容[已解决]

Nothing was returned from render Error in React

当我们忘记显式地从函数或类组件返回一个值时，就会发生“渲染中没有返回任何内容”的 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>
);

上面的示例显示了如何使用带有箭头函数的隐式返回。请注意，我们使用括号来包裹 JSX 代码，而不是大括号。

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

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

要解决这个问题，请将左括号与您的return
语句放在同一行。

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

如果你的左括号放在下一行，引擎会认为它是return;下一行的一些不相关的代码。

React 组件只是函数，所以当你不从函数返回值时，你隐式返回undefined。

React 认为null返回值没问题，但如果您的函数或类组件返回undefined，则会抛出错误。

结论

当我们忘记显式地从函数或类组件返回一个值时，就会发生“渲染中没有返回任何内容”的 React 错误。

要解决该错误，请从您的组件显式返回 JSX，使用带有箭头函数的隐式返回，或者null如果您不打算返回任何内容，则返回。