显示来自外部 url 的 json 数组中的数据，没有 api

Question

我在尝试从 json 中提取特定数据时遇到问题。正如您从控制台日志中看到的那样，我可以获取任何数字，但无法获取任何属性，例如艺术家或图像。我有两个错误，一个是大多数属性上的冒号，其次是“警告：列表中的每个孩子都应该有一个唯一的“关键”道具。”

我希望能够返回信息并将其显示在另一个组件上，因此您可以从返回中看到我有一个变量列表，我需要这些变量来完成我的项目。

function Data() {
        const [Music, setMusic] = useState([], {});
    useEffect(() => {
      axios.get('https://itunes.apple.com/us/rss/topalbums/limit=100/json')
      .then((data) => {
        setMusic(data.data.feed.entry);
        console.log(data.data.feed.entry[20]);
        })
        .catch((err) => console.log(err));
    },[]);
    
    
    
    
    
    
        return (
            <div>
                <h2>Album List</h2>
                 <ul className="albums">
                    {Music.map(Music => {
                    const  { id, name, image, label, title, artist } = Music;
                    return (
                    <div><li key={id.attributes.id}>
                    <img src={'/'} alt={"error"} />
                    <h2>{}</h2>
                    </li>
                    </div>
                    );
                    })}
                </ul>
            </div>
        )
    }

Answer 1

您没有使用正确的键值。例如，可以从im:image 访问图像，从im:name 访问名称，从im:price 访问价格。 Sandbox

<li key={id.attributes['im:id']}>
                <img src={Music['im:image'][0].label} alt={'error'} />
                <h2>{Music['im:name'].label}</h2>
                <h2>{Music['im:price'].label}</h2>
              </li>