ReactJS 错误：\“渲染没有返回任何内容。这通常意味着缺少返回语句。或者，要渲染任何内容，返回 null\”

Question

所以我正在开发一个基本的 React 应用程序，它根据一组对象呈现一些收据。前任：

const receipts = [
  {
    person: "Karolin",
    order: {
      main: "Burrito",
      protein: "Organic Tofu",
      rice: "Purple Rice",
      sauce: "Green Crack",
      toppings: ["Baby Bok Choy", "Cucumber Kimchi"],
      drink: "Korchata",
      cost: 22
    },
    paid: false
  }]

但是我收到以下错误：

Nothing was returned from render error

据我所知，我所有的组件都正确返回，但我不确定是什么引发了错误。

这是我当前的 App.js 组件（该组件还包含收据数组）：

import React from 'react';
import { useState } from 'react';
import './App.css';
import Receipts from './Receipts';


function App() {
  // const [receipt, setState] = useState(receipts);

    return(
      <div>
        <h1 className="truck-name">Korilla Receipts</h1>
        <Receipts receipts={receipts} />
      </div>
    )

}

export default App;

所以我的 App 组件显示了一个返回并正在调用我的 Receipts 组件。以下是我的收据组件：

import React from "react";
import Receipt from "./Receipt";

function Receipts(props) {
    // console.log(props);
    const receipts = props.receipts.map((receipt, index) => {
        // console.log('receipt', receipt.order.sauce)
        return(
            <Receipt
                key={index}
                index={index}
                person={receipt.person}
                main={receipt.order.main}
                protein={receipt.order.protein}
                rice={receipt.order.rice}
                sauce={receipt.order.sauce}
                drink={receipt.order.drink}
                cost={receipt.order.cost}
            />
            );
        });
}

export default Receipts;

该组件也正在返回。然后我将所有这些道具传递给我的收据组件

import React from 'react';
import './Receipt.css';

function Receipt(props) {
    // console.log(props);
    return(
        <div className="receipt">
            <h2>{props.person}</h2>
            <h4>{props.main}</h4>
            <hr/>
            <br />
            <span>Protein: {props.protein}</span>
            <br />
            <span>Rice: {props.rice}</span>
            <br />
            <span>Sauce: {props.sauce}</span>
            <br />
            <span>Drink: {props.drink}</span>
            <br />
            <span>Cost: {props.cost}</span>
        </div>
    );
}

export default Receipt;

为了完整起见，这是我正在执行渲染的 index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
<React.StrictMode>
    <App />
</React.StrictMode>, 
document.getElementById('root'));

我试过的： 我环顾四周，发现每个类似的问题通常都缺少返回值，或者在下一行有返回值的左括号。提前致谢！

查找了以下 stackoverflow 问题：

how to map() in JSX ? ERROR: Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

Error: App(...): Nothing was returned from render. This usually means a return statement is missing

Route(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

还查看了以下网站： https://owenconti.com/posts/nothing-was-returned-from-render-reactjs-error https://bobbyhadz.com/blog/react-nothing-was-returned-from-render

尝试切换以下内容：

    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "1.1.5"

到

    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",

Answer 1

你没有从Receipts 返回任何东西

function Receipts(props) {
  // console.log(props);
  const receipts = props.receipts.map((receipt, index) => {
    // console.log('receipt', receipt.order.sauce)
    return (
      <Receipt
        key={index}
        index={index}
        person={receipt.person}
        main={receipt.order.main}
        protein={receipt.order.protein}
        rice={receipt.order.rice}
        sauce={receipt.order.sauce}
        drink={receipt.order.drink}
        cost={receipt.order.cost}
      />
    );
  });
  return receipts;
}