Получено сопоставление JSON Объект в React

Question

То, чего я пытаюсь добиться, - это страница администратора, извлекающая данные пользователей из локальной конечной точки.

• Вот что я вижу в localhost: 3000 / api / users: ссылка

• Это компонент, который должен отображать список пользователей:

    import React, { useState } from "react";

    import "./admin-users.styles.scss";

    const AdminUsers = () => {
      const [listUsers, setListUsers] = useState(null);
      const [error, setError] = useState("error");

      React.useEffect(() => {
        listUsers === null && retrieveUsers();
      });

      const retrieveUsers = () => {
        fetch("http://localhost:3000/api/users", {
          method: "get",
          headers: { "Content-Type": "application/json" },
        })
          .then((response) => response.json())
          .then((retrievedUsers) => {
            if (retrievedUsers) {
              setListUsers(retrievedUsers);
            } else {
              setError("error active");
            }
          });
      };

      return (
        <div className="admin-users">
          <h2>Users Table</h2>

          {console.log(listUsers)}

          <div className={error}>
            <p>Error fetching data</p>
          </div>

          {!listUsers === null &&
            listUsers.map((user) => {
              console.log(user);
              return <span>User</span>;
            })}
        </div>
      );
    };

    export default AdminUsers;

• Я могу console.log список пользователей, но я не могу отобразить через listUsers: ссылка

  Я думаю, что проблема заключается в типе объекта, который я пытаюсь отобразить; Пробовал искать решения, но не нашел ничего полезного ..

Заранее благодарим вас за ваше время и помощь!

Answer 1

Обновить эту строку кода:

{!listUsers === null &&
    listUsers.map((user) => {
        console.log(user);
        return <span>{user}</span>;
    })
}

Answer 2

Заменить return <span>User</span>; на return <span>{user}</span>;