React - 错误：App（...）：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null

Posted 2023-03-10

【中文标题】React - 错误：App（...）：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null

【英文标题】：React - Error: App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

【发布时间】：2021-02-09 07:41:30

【问题描述】：

我正在使用 MERN 和 GraphQL Apollo 创建一个全栈应用程序。为了将后端连接到客户端，我使用的是 Apollo Client。这是代码-

ApolloProvider.js

import React from "react";
import App from "./App";
import 
  ApolloClient,
  createHttpLink,
  InMemoryCache,
  ApolloProvider,
 from "@apollo/client";

const httpLink = createHttpLink( uri: "http://localhost:5000" );

const client = new ApolloClient(
  link: httpLink,
  cache: new InMemoryCache(),
);

export default (
  <ApolloProvider client=client>
    <App />
  </ApolloProvider>
);

index.js

import ReactDOM from "react-dom";
import reportWebVitals from "./reportWebVitals";
import ApolloProvider from "./ApolloProvider";

ReactDOM.render(ApolloProvider, document.getElementById("root"));

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();

App.js

import React from "react";
import  BrowserRouter as Router, Route  from "react-router-dom";
import  Container  from "semantic-ui-react";

import "semantic-ui-css/semantic.min.css";
import "./App.css";

import MenuBar from "./components/MenuBar";
import Home from "./pages/Home";
import Login from "./pages/Login";
import Register from "./pages/Register";

function App() 
  <Router>
    <Container>
      <MenuBar />
      <Route exact path="/" component=Home />
      <Route exact path="/login" component=Login />
      <Route exact path="/register" component=Register />
    </Container>
  </Router>;


export default App;

ReactDOM.render(ApolloProvider, document.getElementById("root")); 出现错误 - '没有从渲染返回。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null。'

谁能帮忙解决这个问题？ 编辑：堆栈跟踪 -

【问题讨论】：

是否有伴随的堆栈跟踪？这通常意味着在某处您没有从您的组件渲染方法之一返回有效的 ReactNode。堆栈跟踪通常会告诉您哪个组件是罪魁祸首。

@JacobSmit 更新有问题

【参考方案1】：

编辑：看起来问题一直在您的App.js 中。您不会返回应用的 JSX。将其添加到：

function App() 
  return (
     <Router>
        <Container>
        <MenuBar />
        <Route exact path="/" component=Home />
        <Route exact path="/login" component=Login />
        <Route exact path="/register" component=Register />
        </Container>
     </Router>
  );

---

原答案：

你需要实际渲染ReactDOM.render中的元素，即

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

同样在你的 apollo 提供者中，返回一个函数组件，而不是纯 JSX。不确定这是否重要，但可能会有所帮助，即

const ApolloApp = () => (
  <ApolloProvider client=client>
    <App />
  </ApolloProvider>
);

export default ApolloApp;

【讨论】：

@GauravGupta 好的，这是你的问题哈哈，我会更新我的答案

非常感谢@Jayce444 它解决了这个问题；）