map 函数没有在 react.js 中迭代状态对象（数组格式）

Question

我正在 react.js 中构建一个 iTunes 搜索项目，它在其中获取输入字段中输入的名称的音乐专辑数据。我正在使用 iTunes 搜索 api 来获取数据，数据为 json 格式，每个搜索包含 50 个对象。

我从 api 获得的数据以数组格式存储/设置为数据状态（我使用钩子来存储数据对象）。

这里我通过setData([json.results[0]])获取每个对象的数据

但问题是 map 函数无法遍历数据状态数组。

我已经尝试了所有方法，但 map 函数没有迭代数据状态对象。 而且它也没有给出任何错误。

谁能告诉我为什么它不起作用？ 提前致谢。

这里是代码。

import { useState } from "react"
const Search = () => {
    const [name, setName] = useState(null);
    const [data, setData] = useState([]);

    const handleInput = event => {
        setName(event.target.value);
    };

    const getIdata = async () => {

        let url = "https://itunes.apple.com/search?term=" + name;
        let cors = "https://cors-anywhere.herokuapp.com/";
        
        setData([]);

        fetch(url)
            .then(data => data.json())
            .then(json => {
                setData([json.results])
            })

        console.log(data);
   }

    return (
        <>
            <div>
                <h1>iTunes App</h1>
                <div>
                    <p>Search: <input className="input-field col s6" id="daal" onChange={handleInput} /></p>
                    <button onClick={getIdata} id="btn">submit</button>
                </div>
                <div className="row" id="output"></div>
            </div>



            {

                data.map(curr => {
                    return (
                        <>
                            <h1>{curr.artistName}</h1>
                            {<div className="row" id="output">
                                <div className="col s4 m4 l4">
                                    <div className="card">
                                        <div className="card-image waves-effect waves-block waves-light">
                                            <img className="activator" src={curr.artworkUrl100} />
                                        </div>
                                        <div className="card-content">
                                            <span className="card-title activator grey-text text-darken-4">{curr.artistName}<i
                                                className="material-icons right">more_vert</i></span>
                                            <p><a href="#">This is a link</a></p>
                                        </div>
                                        <div className="card-reveal">
                                            <span className="card-title grey-text text-darken-4">{curr.trackCensoredName}<i
                                                className="material-icons right">close</i></span>
                                            <p>Here is some more information about this product that is only revealed once clicked on.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>}
                        </>
                    );
                })
            }
        </>
    )
}

export default Search

Answer 1

您正在将一个数组放入带有setData([json.results]) 的数组中，并且data 设置为：

[[ { «song» }, { «song» }, { «song» } ]]

注意双重[[ 和]]。直接设置获取的歌曲列表，而不是将其包装在另一个数组中。例如。 setData(json.results) 这应该导致 data 是：

[ { «song» }, { «song» }, { «song» } ]

---

目前没有错误的原因是因为您只能访问像 curr.artistName 这样的对象属性，如果 curr 是一个数组，它就可以正常工作。

const curr = [];
curr.artistName //=> undefined (no error)

如果您尝试对结果值执行任何操作并且不希望它是undefined，您将收到错误消息。例如curr.artistName.split("") 会抛出一个错误，因为你不能在undefined 上调用split。