javascript - 为什么我无法访问数组内的对象值？

问题描述

我正在开发反应应用程序，并且我已经调用了后端来检索数据。使用检索来自后端的数据res.status(200).json(user)。响应中的调用是

import React, { useState, useEffect } from 'react';

import UserService from '../services/user.service';

const AdminBoard = () => {
  const [content, setContent] = useState('');

  useEffect(() => {
    UserService.getAdminBoard().then(
      (response) => {
        setContent(response.data);
      },
      (error) => {
        const _content =
          (error.response &&
            error.response.data &&
            error.response.data.message) ||
          error.message ||
          error.toString();

        setContent(_content);
      }
    );
  }, []);

  console.log(content);
  

  return (
    <div className='container'>
      <header className='jumbotron'>
        <h4>List of users</h4>
        {content &&
          content.map((item) => (
            <div key={item.username}>
              <div className='container p-3 my-3 bg-dark text-white'>
                <strong>Username:</strong>
                <h4>
                  <div>{item.username}</div>
                </h4>
                <strong>Email:</strong>
                <h4>{item.email}</h4>
                <strong>Role:</strong>
                <h4>{item.roles.name}</h4> //I'm not getting role name
              </div>
            </div>
          ))}
      </header>
    </div>
  );
};

export default AdminBoard;

现在，当我console.log满足时，我得到：

0: {name: "New Name", username: "agent", email: "agent@gmail.com", roles: Array(1)}
1: {name: "admin", username: "admin", email: "email@gmail.com", roles: Array(1)}
etc

当我展开角色时角色的样子（抱歉，我无法在此处粘贴输出）：

现在，当我使用content.mapwithitem.name并将它们集成到我的代码中时，我可以轻松地获取我的值。但是当我尝试从角色中提取价值时，我遇到了一个问题。现在，当我console.logcontent.roles 时，我得到了未定义。

我想从此数组中获取名称。但是我尝试了很多方法：

console.log(content.roles.name) console.log(content.roles['name']) console.log(content.roles[0].name) 等等。我也尝试过在 StackOverflow 上找到的几个 forEach 循环，但我总是无法读取未定义的属性。

我的问题是：

这是一个对象数组还是带有对象数组的对象？
有没有一种方法可以在没有循环的情况下访问这些值？

标签： javascriptarraysobject

javascript - 为什么我无法访问数组内的对象值？

问题描述

解决方案

推荐阅读