карта не является функцией при чтении данных из файла json в reactjs

Question

Я учусь ReactJs Итак, я пытаюсь прочитать данные из файла json в ReactJs. Я проходил через турориал и пытался это сделать, но получаю сообщение об ошибке «карта не является функцией» в браузере.

мое приложение. 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

я не уверен, что вы делаете, но я вижу, что вы возвращаете что-то из функции рендеринга (я предполагаю, что приложение является компонентом, а не функцией)

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

Answer 2

Вам не хватает свойства User, функция карты действительна только для массивов

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