map function 沒有在 react.js 中迭代 state 對象（數組格式）

Question

我正在 react.js 中構建一個 iTunes 搜索項目，在該項目中它獲取輸入字段中輸入的名稱的音樂專輯數據。 我正在使用 iTunes 搜索 api 來獲取數據，該數據采用 json 格式，每個搜索包含 50 個對象。

我從 api 獲得的數據以數組格式存儲/設置為數據狀態（我使用鈎子存儲數據對象）。

在這里，我通過setData([json.results[0]])獲取每個 object 的數據

但問題是 map function 無法遍歷數據 state 數組。

我已經嘗試了所有的東西，但 map function 沒有迭代數據 state ZA8CFDE6331BD59EB26AC98B4。 而且它也沒有給出任何錯誤。

有人可以告訴我為什么它不起作用嗎？ 提前致謝。

這是代碼。

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» } ]

---

當前沒有錯誤的原因是因為您只能訪問 object 屬性，例如curr.artistName如果curr是一個數組，它可以正常工作。

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

如果您嘗試對結果值做任何事情並且不要期望它是undefined ，您將收到一個錯誤。 例如curr.artistName.split("")會拋出一個錯誤，因為你不能在undefined上調用split 。