为什么在尝试显示get request的内容时仅在.map中显示的第一个值？

Question

我已经尝试了所有我可能可以做的一切，但由于某种原因，仅数组中的第一个索引（[{...}，{...}，{...}]，{...}]）显示在浏览器上 - 其他两个指数被忽略。我已经搜索了这个问题，因此发现人们面临的一些类似问题，但他们的解决方案都不适合我。

我在做什么错？我该如何制作，以便浏览器上显示数组中的所有内容？

这是我的代码：

import React, {useEffect, useState} from "react";
import '../../../sass/prizes/prizes.scss';

const Prizes = () => {

    const [prizeData, setPrizeData] = useState([]);                       

    useEffect(() => {
        axios.get('http://localhost/api/prizes')
            .then(resp => {
                setPrizeData([resp]);
                console.log(prizeData)
            }).catch(error => {
            console.log(error);
        });
    }, []);

    return (
        <div className="main">
            <h1>Prizes</h1>
            <ul className="cards">
                <li className="cards_item">
                    <div className="card">
                        {
                            prizeData.map((prizes, index) => {
                                return(
                                    <>
                                        <div className="card_image"><img src={prizes.data[index].image_url} className="giftCards"/></div>
                                        <div className="card_content">
                                            <h2 className="card_title">{prizes.data[index].prizeName}</h2>
                                        </div>
                                    </>
                                );

                            })
                        }
                    </div>
                </li>
            </ul>
        </div>

    );
};

export default Prizes;

记录响应的屏幕快照

Answer 1

某些表现是正确的，应该是setPriedata（resp）。如果您获得prizedata.map不是一个函数，那么响应（resp）可能有问题。

resp只是一个数组吗？您可以打印状态以查看其中存储的内容吗？

Answer 2

当您这样做时，您基本上将Prop用作数组：

setPrizeData([resp])

这就是为什么您只会获得单个索引，因为您将其用作数组。

而是这样做：

setPrizeData(resp);

您遇到的错误：

prizeData.map is not a function

API可能正在返回对象。做一个卷曲请求或一些事情以查看您的响应的样子。

如果您可以确认实际获取数据，请在Axios中尝试使用类似的内容：

.then(response => {
   setPrizeData(response.data);          
})
.catch(error => console.log(error));

此外，这是您可以使用的模板：

import React, { useEffect, useState } from "react";
import axios from "axios";

export default function App() {
   const [data, setData] = useState([]);
   const getData = async () => {
      const { data } = await axios.get(<yourapi endpoint>);
      setData(data);
   };

   useEffect(() => {
   getData();
 }, []);

  return <div>{JSON.stringify(data)}</div>;
}