我在访问对象内数组中的嵌套对象时遇到问题

Question

我很新，这是我的第一个问题帖子，我希望其他人会遇到类似的问题。

接口地址

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

hit_points: 17   (key: value)
hit_dice: "5d6"   (key: value)
speed: {fly: 40, walk: 20}   (object)

special_abilities: Array(1)
  0:
   desc: "some text"
   name: "One with Wind"

我能够访问special_abilities[0].name ，在这种情况下，我返回"One with Wind" 。

我无法弄清楚如何做的是，当我获得不止一种能力时，如何在怪物只有 1 种能力的情况下显示所有 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;

这是我目前拥有的代码，我希望在列表中添加另一个<p></p>以显示怪物的每种特殊能力和描述，并且当它们具有不止一种能力时也一样。

在问之前，我曾尝试：

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

虽然这对一个怪物有效，但如果怪物有一个以上的能力，我就看不到它们了。 如果怪物的能力少于两个并且我在日志中说[0][1][2]则网站崩溃。

我希望有人可以帮助我解决这个问题，而在堆栈溢出之前已经问过类似的问题，但我找不到灵感或答案。

亲切的问候，

羊

Answer 1

这是一个如何在current更改时获取怪物的示例，您可以从match.params.id获取current ，但我不想制作路由示例来演示。 请注意，我使用的是 Monster.slug，这可能与怪物名称不同。 您也应该使用monster.slug，因为这是api 使用的。

确保 current 是您的效果的依赖项，因此它会在更改时重新运行。 我认为您的开发环境设置不正确，因为您显示的代码缺少依赖项，您的编辑器应该警告您

 const { useState, useEffect } = React; const App = () => { const [current, setCurrent] = useState('aatxe'); //you can do: //const current = match.params.id.toLowerCase(); const [item, setItem] = useState(null); useEffect(() => { //SO code snippet doesn't have recent babel, so no // async await support in snippet code, changed to // promise const fetchMonster = () => fetch( `https://api.open5e.com/monsters/${current}/?format=json` ) .then(response => response.json()) .then(setItem); fetchMonster(); }, [current]); return ( <div> <select value={current} onChange={e => setCurrent(e.target.value)} > <option value="aatxe">Aatxe</option> <option value="aboleth">Aboleth</option> </select> {item && ( <div> <h1>{item.name}</h1> <ul> {item.special_abilities.map( (ability, index) => ( <li key={index}>{ability.name}</li> ) )} </ul> </div> )} </div> ); }; ReactDOM.render(<App />, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>