從 Z3C797270102480CB74D1207DZD3E 中的 json 文件讀取數據時，map 不是 function

Question

我正在學習 ReactJs 所以我試圖從 ReactJs 中的 json 文件中讀取數據。我正在瀏覽教程並嘗試了這個但我在瀏覽器中收到一條錯誤消息“地圖中的功能不是”

我的 App.js 文件如下所示：

mport React from "react";
import logo from "./logo.svg";
import "./App.css";
import Data from "./data.json";
import { render } from "@testing-library/react";

function App() {
  render();
  return Data.User.map((post) => {
    <div>
      <h1>{post.uid}</h1>
      <p>{post.Name}</p>
    </div>;
  });
}

export default App;



    data.json file:

        {
          "User": [
            {
              "uid": "ab123",
              "Name": "abc",
              "Lastname": "def",
              "Email": "abc@gmail.com",
              "Groups": [
                {
                  "EVERYONE": "TestGroup1"
                }
              ]
            }
          ]
        }

Answer 1

您缺少用戶屬性 map function 僅在 Arrays 上有效

return data.User.map((post) => {
    return (
      <div>
        <h1>{post.uid}</h1>
        <p>{post.Name}</p>
      </div>
    );
  });

Answer 2

我不確定你 r 在做什么，但我看到你從渲染函數中返回了一些東西（我假設 App 是一個組件而不是一個函數）

export class App extends React.Component {
  render(
      return Data.User.map((post) => {
        <div>
        <h1>{post.uid}</h1>
        <p>{post.Name}</p>
        </div>;
      });
  );
}