在 React 中映射获取的 JSON 对象答案

【问题标题】：Mapping fetched JSON Object in React在 React 中映射获取的 JSON 对象
【发布时间】：2020-05-03 14:45:45
【问题描述】：

我想要实现的是一个从本地端点获取用户数据的管理页面。

我可以在 localhost:3000/api/users 中看到： link
这是应该显示用户列表的组件：

    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 进行映射：link

我认为问题在于我要映射的对象类型；尝试寻找解决方案，但找不到任何有用的东西..

提前感谢您的时间和帮助！

【问题讨论】：

什么是User in User;
这里有什么问题？当您执行 console.log(user) 时，它应该具有正确的数据，这将是基于您的示例的对象。还有为什么你可以用!listUsers === null 而不是{listUsers && listUsers.map(() => {})}
如果listUsers 是一个数组，那么您没有理由不能使用map。我想你想做的就是这样：{user.name};
由于某种原因，如果只写字符串'user'，之前没有显示，我把它放在那里进行测试。现在我改为{user.name}，它显示得很好！谢谢大家
@ale917k 啊，是的。 user 是一个对象，您必须使用它的一个属性来显示相应的值。

标签： javascript json reactjs react-hooks

【解决方案1】：

更新这行代码：

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

【讨论】：

由于某种原因，如果只写字符串'user'，之前没有显示，我把它放在那里进行测试。现在我改为{user.name}，它显示得很好！谢谢大家

【解决方案2】：

将return User; 替换为return {user};

【讨论】：

花括号{user}
嗯，user，看起来像屏幕截图中的object。所以我猜，他想做 {user.name}
由于某种原因，如果只写字符串'user'，之前没有显示，我把它放在那里进行测试。现在我改为{user.name}，它显示得很好！谢谢大家