Uncaught (in promise) TypeError: images.map is not a function

Question

我正在尝试学习如何使用 axios 从 jsonplaceholder api 获取数据。我试图从 https://jsonplaceholder.typicode.com/v1/photos 获取图像并将其映射到 img 元素，但我收到“未捕获（承诺）TypeError：images.map 不是函数”错误。我该如何解决这个错误？？

这是我的代码

import axios from "axios";
import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [images, setImages] = useState([]);

  const getData = async () => {
    const { data: images } = await axios(
      "https://jsonplaceholder.typicode.com/photos"
    );
    setImages({ images });
    console.log(images);
  };

  useEffect(() => {
    getData();
  }, []);
  return (
    <div className="App">
      Populate with imagse from jsonplaceholder
      {images.map((image) => {
        return <img src={image.thumbnailUrl} alt={image.title} />;
      })}
    </div>
  );
}

给出的解决方案在 codeSandbox 中有效。 https://codesandbox.io/s/react-json-server-9g7wo?file=/src/VideoCard.js 但在实际应用中仍然给我“未处理的拒绝（类型错误）：对象（...）不是函数”错误

Answer 1

有了这个：

setImages({ images });

您正在将 images 变量设置为具有一个属性 images 的对象，该属性是一个数组，有点像这样：

const imagesForNextRender = {
  images: [
    /* image data */
  ]
};

但你不能.map那样。首先提取 images 属性（不推荐）：

images.images.map(

或者，更明智的是，使用数组本身调用 setImages，而不是将其包装在一个对象中：

const result = await axios("https://jsonplaceholder.typicode.com/photos");
setImages(result.data);