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

Question

Console.log显示我认为可以用map()显示的对象。但是，出现错误“渲染中没有 returned。这通常意味着缺少 return 语句。或者，要渲染任何内容，return 为空。”

问题出在哪里？如何映射()对象？谢谢！我在 App.jsx:

中导出 contacts.js

export const contacts = [
  {
    name: "Beyonce",
    imgURL:
      "https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg",
    phone: "+123 456 789",
    email: "b@beyonce.com"
  },
  {
    name: "Jack Bauer",
    imgURL:
      "https://pbs.twimg.com/profile_images/625247595825246208/X3XLea04_400x400.jpg",
    phone: "+987 654 321",
    email: "jack@nowhere.com"
  },
  {
    name: "Chuck Norris",
    imgURL:
      "https://i.pinimg.com/originals/e3/94/47/e39447de921955826b1e498ccf9a39af.png",
    phone: "+918 372 574",
    email: "gmail@chucknorris.com"
  }
];

App.jsx 看起来像：

import React from "react";
import { Card } from "./Card";
import { contacts } from "../contacts";

function App() {
  contacts.map((item) => {
    return <Card name={item.name} img={item.imgURL} phone={item.phone} email={item.email} />
  }
  )
}

export default App;

和卡片组件：

import React from "react";

export const Card = (props) => {
    return (
        <div>
            <h1 className="heading">My Contacts</h1>
            <div className="card">
                <div className="top">
                    <h2 className="name">{props.name}</h2>
                    <img className="circle-img"
                        src={props.img}
                        alt="avatar_img"
                    />
                </div>
                <div className="bottom">
                    <p className="info">{props.phone}</p>
                    <p className="info">{props.email}</p>
                </div>
            </div>
        </div>
    );
}

Answer 1

我认为问题在于您的 App() 中没有 return 任何组件。试试这个：

function App() {
  return contacts.map((item) => {
    return <Card name={item.name} img={item.imgURL} phone={item.phone} email={item.email} />
  }
  )
}

Answer 2

在App组件中添加return语句：

function App() {
  return contacts.map((item) => {
    return <Card name={item.name} img={item.imgURL} phone={item.phone} email={item.email} />
  }
  )
}

注意contacts.map

之前的return

Answer 3

更新代码

App.jsx

import React from "react";
import { Card } from "./Card";
import { contacts } from "../contacts";

function App() {

const arrayMap = contacts.map((item) => {
    return <Card 
            name={item.name} 
            img={item.imgURL} 
            phone={item.phone} 
            email={item.email} 
           />
  })
return (
      //Load arrayMap here..
    { arrayMap }
);

}
export default App;

Answer 4

为简单起见，为什么不将所有逻辑放在同一个 js 文件中呢？

import React from "react";
import { contacts } from "../contacts";

function App() {
    const card = contacts.map((contact, index) => (
        <div className="card" key={index}>
            <div className="top">
                <h2 className="name">{contact.name}</h2>
                <img className="circle-img"
                    src={contact.img}
                    alt="avatar_img"
                />
            </div>
            <div className="bottom">
                <p className="info">{contact.phone}</p>
                <p className="info">{contact.email}</p>
            </div>
        </div>
    ));
    
    return (
        <div>
            <h1 className="heading">My Contacts</h1>
            {card}
        </div>
    );
};

export default App;

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

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

javascript

ejs

reactjs