ReactResponsiveCarousel-無法讀取空屬性（讀取“型別”）-有解無憂

我嘗試實作 react-responsive-carousel。它適用于靜態鏈接，但是當我嘗試從我的資料庫中獲取資料時，我得到了錯誤。我試圖測驗我是否獲得了與 console.log(imagemap) 的鏈接，它作業正常。我得到：['https://www.top-magazin-frankfurt.de/wp-content/up…1/12/Das-„Franziska-im-Henninger-Turm.jpg', 'https： //www.zeitlos-erding.de/wp-content/uploads/2…6/04/Zeitlos-Erding-Website-Restaurant-Bild-6.jpg']

但是當我嘗試在輪播中執行此操作時，我收到此錯誤：無法讀取 null 的屬性（讀取“型別”）

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import 'react-responsive-carousel/lib/styles/carousel.min.css'; // requires a loader
import { Carousel } from 'react-responsive-carousel';

const Ambience = () => {
  const [images, setImages] = useState([]);
  useEffect(() => {
    const getImages = async () => {
      const res = await axios.get('/api/galery');
      setImages(res.data);
    };

    getImages();
  }, []);
  const imagemap = images.map((url) => {
    return url.name;
  });
  console.log(imagemap);
  return (
    <div className='min-h-screen'>
      <Carousel showArrows={true} showThumbs={true}>
        {images.map((url, index) => {
          <div key={index}>
            <img src={url.name} />
          </div>;
        })}
      </Carousel>
    </div>
  );
};

export default Ambience;

uj5u.com熱心網友回復：

你忘了寫return在Carousel.

<Carousel showArrows={true} showThumbs={true}>
    {images.map((url, index) => {
      return (
         <div key={index}>
            <img src={url.name} />
         </div>);
     })}
</Carousel>

uj5u.com熱心網友回復：

  import React, { useState, useEffect } from 'react';
  import axios from 'axios';
  import 'react-responsive-carousel/lib/styles/carousel.min.css'; // requires a loader
  import { Carousel } from 'react-responsive-carousel';

  interface IMAGES {
   name: string;
  }

  const Ambience = () => {
  const [images, setImages] = useState<IMAGES[]>([]);
  useEffect(() => {
  const getImages = async () => {
  const res = await axios.get('/api/galery');
   setImages(res.data);
  };
   getImages();
 }, []);

  return (
  <div className='min-h-screen'>
  <Carousel showArrows={true} showThumbs={true}>
    {images.map((url, index) => (
      <div key={index}>
        <img src={url.name} />
      </div>;
    ))}
  </Carousel>
</div>
); 
};
export default Ambience;

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/486252.html

標籤：反应图片 axios 映射

上一篇：如何在反應中從另一個檔案設定狀態變數

下一篇：條件為真后將按鈕轉換為文本