从URL数组中获取图像并将其映射到新数组(ReactJS)

import React, { useState } from 'react';

function ImageComponent() {
  const [imageUrls, setImageUrls] = useState([
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg'
  ]);
  const [mappedImages, setMappedImages] = useState([]);

  // 在这里进行图像映射的逻辑

  return (
    <div>
      {/* 显示映射后的图像 */}
      {mappedImages.map((image, index) => (
        <img key={index} src={image} alt={`Image ${index}`} />
      ))}
    </div>
  );
}

export default ImageComponent;

import React, { useState, useEffect } from 'react';

function ImageComponent() {
  const [imageUrls, setImageUrls] = useState([
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg'
  ]);
  const [mappedImages, setMappedImages] = useState([]);

  useEffect(() => {
    // 在组件挂载或图像URL数组更新时进行映射
    const mapped = imageUrls.map(url => url);
    setMappedImages(mapped);
  }, [imageUrls]);

  return (
    <div>
      {/* 显示映射后的图像 */}
      {mappedImages.map((image, index) => (
        <img key={index} src={image} alt={`Image ${index}`} />
      ))}
    </div>
  );
}

export default ImageComponent;