Reactjs 如何在React中检查此导入数据的数据结构

我正在学习一个教程，并看到以下导入语句：

import pet, { ANIMALS } from "@frontendmasters/pet";

这是API

我想看看我正在导入的数据的结构：

console.log(ANIMALS)

console.log(pets)

但这显示为“未定义”

我应该如何

console.log

this来查看数据结构？（对象/数组等）

我做了这个测试：

var pet = require("@frontendmasters/pet")

console.log(pet)

输出为：

 Object {ANIMALS: ["barnyard", "bird", "cat", "dog", "horse", "rabbit", 
 "scales-fins-other", "small-furry"], …}

我还注意到您正在使用React go here右下角单击控制台以查看输出：

这应该起作用：

import React from "react";
import "./styles.css";
import pet from "@frontendmasters/pet";

export default function App() {
  console.log(pet);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

从“React”导入React；
导入“/styles.css”；
从“@frontendmasters/pet”导入宠物；
导出默认函数App（）{
控制台日志（pet）；
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

您在哪里调用了api？您可能需要单击沙盒浏览器中的刷新按钮来查看结果。