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

时间:2020-12-28 18:13:36

标签: reactjs

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

这是我的代码 enter image description here

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 但在实际应用中仍然给我“未处理的拒绝(类型错误):对象(...)不是函数”错误

1 个答案:

答案 0 :(得分:3)

有了这个:

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