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

Question

我正在尝试学习如何使用 axios 从 jsonplaceholder api 获取数据。我试图从 https://jsonplaceholder.typicode.com/v1/photos 获取图像并将其映射到一个 img 元素，但我收到“未捕获（承诺）类型错误：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 但是在真正的应用程序中仍然给我“Unhandled Rejection (TypeError): Object(...) is not a function”错误

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);