<app />组件未在 React.js 中呈现

Question

我不知道问题在哪里。 挣扎了很多，但我的组件仍然没有在 React.js 中呈现。 它只是显示白色屏幕，没有别的。

卡片.jsx

import React from "react";

function Card(props){
return (
    <>
    <img src={props.imgsrc} alt="mypic"/>
    <h1>{props.title}</h1>
    </>
  )
}

export default Card;

应用程序.jsx

import React from 'react';
import Card from "./Cards";
import Reportdata from "./Api";

const App = () => {
 <>
  {Reportdata.map(val=>{
    return (
     <Card
       key = {val.id}
       imgsrc = {val.image}
       title = {val.title}/>
       )
    })};
 </>
}

export default App;

索引.js

import React from 'react';
import ReactDOM from 'react-dom/client'; 
import App from "./App.jsx";

const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
  <App />
);

Answer 1

您需要在App组件中添加 return 语句：

const App = () => {
 return (
  <>
   {Reportdata.map(val=>{
    return (
     <Card
       key = {val.id}
       imgsrc = {val.image}
       title = {val.title}/>
       )
    })};
  </>
)}

或者，如果您不想使用 return 语句，请确保删除大括号：

const App = () => (
  <>
   {Reportdata.map(val=>{
    return (
     <Card
       key = {val.id}
       imgsrc = {val.image}
       title = {val.title}/>
       )
    })};
  </>
)

文档： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions?retiredLocale=it

Answer 2

正如@poal98所提到的，您需要一个return语句。 或者您也可以从 App 组件中删除{ } ：

const App = () => (
  <>
    {Reportdata.map((val) => {
      return <Card key={val.id} imgsrc={val.image} title={val.title} />;
    })}
    ;
  </>
);

这是一个工作示例。