Javascript 访问对象中数组中的嵌套对象时遇到问题

我是新来的，这是我的第一个问题，我希望其他人也会有类似的问题

我正在接收api数据并转换为JSON格式。从此，我可以访问对象（每个怪物）中的键和值

我可以访问

特殊能力[0]。name

，在这种情况下，我会返回

“风之一”

我不知道该怎么做的是当我得到一个以上的技能时，当一个怪物只有一个技能时，如何在不破坏脚本的情况下显示所有3个技能

import React, {useState, useEffect} from 'react';
import './App.css';

function currentMonster({match}) {
    const [item, setItem] = useState([]);
    useEffect (() => {
        fetchMonster();
    }, []);

const fetchMonster  = async () => {
    const mob = match.params.id.toLowerCase();
    const fetchMonster = await fetch(`https://api.open5e.com/monsters/${mob}/?format=json`)
    const monster = await fetchMonster.json();
    setItem(monster)
    console.log(monster);
// const abilities = monster.special_abilities[0].name
}
    return (
            <div>
                <h1>{item.name}</h1>
                <p>Size: {item.size}</p>
                <p>Race: {item.type}</p>
                <p>Alignment: {item.alignment}</p>
                <p>Armor Class: {item.armor_class}</p>
                <p>Hit points: {item.hit_points}</p>
                <p>Hit dice: {item.hit_dice}</p>
                <p>Strength: {item.strength}</p>
                <p>Dexterity: {item.dexterity}</p>
                <p>Constitution: {item.constitution}</p>
                <p>Intelligence: {item.intelligence}</p>
                <p>Wisdom: {item.wisdom}</p>
                <p>Charisma: {item.charisma}</p>
                <p>Senses: {item.senses}</p>
                <p>CR: {item.challenge_rating}</p>
            </div>
        )
    }


  export default currentMonster;

import React，{useState，useffect}来自“React”；
导入“/App.css”；
函数currentMonster（{match}）{
const[item，setItem]=useState（[]）；
useffect（（）=>{
fetchMonster（）；
}, []);
const fetchMonster=async（）=>{
const mob=match.params.id.toLowerCase（）；
const fetchMonster=等待获取(`https://api.open5e.com/monsters/${mob}/？format=json`）
const monster=wait fetchMonster.json（）；
设置项（怪物）
控制台日志（怪物）；
//常量技能=怪物。特殊技能[0]。名称
}
返回(
{item.name}
大小：{item.Size}

种族：{item.type}

对齐：{item.Alignment}

装甲等级：{item.Armor\u Class}

生命值：{item.Hit_points}

命中骰子：{物品。命中骰子}

强度：{item.Strength}

灵巧度：{item.Dexterity}

章程：{项目.章程}

智能：{item.Intelligence}

智慧：{item.wis智}

魅力：{item.Charisma}

感官：{item.Senses}

CR:{item.challenge_rating}

)
}
导出默认值；

这是我目前拥有的代码，我希望在列表中添加另一个

，显示怪物的每个特殊能力和描述，当他们拥有一个以上的能力时，这些技能也会显示出来

在询问之前，我已尝试：

const [ability, setAbility] = useState([]);
setAbility(monster.special_abilities[0])
and then <p>{ability.name}</p>

const[ability，setAbility]=useState（[]）；
可设置性（怪物特殊技能[0]）
然后{ability.name}

虽然这对一个怪物有效，但如果怪物有一个以上的能力，我就看不到它们。如果怪物的能力少于两个，我会记录说

[0][1][2]

网站就会崩溃

我希望有人能帮我解决这个问题，而类似的问题以前在stack overflow中也被问过，我还没有找到灵感或答案

亲切问候,

---

Sheep

这里是一个如何在

current

更改时获取怪物的示例，您可以从

match.params.id

获取

current

，但我不想制作一个路由示例来演示。请注意，我使用的是monster.slug，这可能与monster name不同。您还应该使用monster.slug，因为api就是这么使用的

确保current是效果的依赖项，以便在更改时重新运行。我认为您没有正确设置开发环境，因为您显示的代码缺少依赖项和编辑器

const{useState，useffect}=React；
常量应用=（）=>{
const[current，setCurrent]=useState（'aatxe'）；
//你可以做：
//const current=match.params.id.toLowerCase（）；
const[item，setItem]=useState（null）；
useffect（（）=>{
//所以代码片段没有最近的巴别塔，所以没有
//代码段中的异步等待支持，更改为
//允诺
常量fetchMonster=（）=>
取回(
`https://api.open5e.com/monsters/${current}/？format=json`
)
.then（response=>response.json（））
。然后（设定项）；
fetchMonster（）；
}，[当前]；
返回(
setCurrent（e.target.value）}
>
Aatxe
底栖魔鱼
{项目&&(
{item.name}

{item.special_capabilities.map(
（能力、指数）=>(
{ability.name}
)
)}

)}
);
};
ReactDOM.render（，document.getElementById（'root'））

reactjs有某种类型的吗？我想你可以做一些事情，比如，var rows=[]；for（var i=0；is不是真的api链接只是为了看看我在用什么api我想我引起了混乱，我的意思是，我正在搜索一个怪物，将URL组件替换为怪物名称：https://api.open5e.com/monsters/${mob}/？format=json

），因此每次api运行时，它只会得到一个“项”或一个“怪物”谢谢HMR，虽然我还没有时间详细检查它，但我插入了您所做的，并且在我的环境中也给出了相同的答案，我不确定我遗漏了什么，我认为babel安装正确，但我确实收到了信息。。。React Hook useEffect缺少依赖项：“fetchMonster”。包括它或删除依赖项数组。但这是唯一出现的错误。无论如何，非常感谢！是的，在您的原始代码中，fetchMonster是效果的依赖项，但在我的代码中不是。唯一的依赖项是

current

，它应该是您要搜索的monster.slug。将其添加为依赖项意味着该效果将在任何更改时运行。

const [ability, setAbility] = useState([]);
setAbility(monster.special_abilities[0])
and then <p>{ability.name}</p>