<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} />;
    })}
    ;
  </>
);

這是一個工作示例。