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