无法读取null属性(读取“type”)

Question

我试着实施反应灵敏的旋转木马。它适用于静态链接，但当我试图从db获取数据时，会出现错误。我试着测试我是否获得了console.log(imagemap)的链接，并且它工作得很好。I getting：'https://www.top-magazin-frankfurt.de/wp-content/up…1/12/Das-%E2%80%9EFranziska-im-Henninger-Turm.jpg'，'https://www.zeitlos-erding.de/wp-content/uploads/2…6/04/Zeitlos-Erding-Website-Restaurant-Bild-6.jpg‘

但是，当我试图在旋转木马中执行此操作时，我会得到以下错误:无法读取null属性(读取“type”)

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;

Answer 1

您忘了在return中写Carousel。

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

Answer 2

  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;