在react+hooks+antdesign中，点击一个按钮，然后用后端返回的数组渲染可以使预览受控的Image.PreviewGroup

您可以使用React的Hooks和Ant Design的Image和PreviewGroup组件来实现点击按钮后渲染受控的预览图像。

首先，您需要在函数组件中引入所需的依赖：

import React, { useState } from 'react';
import { Image, Button } from 'antd';

然后，您可以创建一个函数组件，使用useState来管理预览图像的状态和按钮点击的状态：

const MyComponent = () => {
  const [images, setImages] = useState([]);
  const [previewVisible, setPreviewVisible] = useState(false);
  const [previewImage, setPreviewImage] = useState('');

  const handleButtonClick = () => {
    // 从后端获取图像数组，这里假设你已经获取到了images数组
    // 使用setImages更新状态
    setImages(['image1.jpg', 'image2.jpg', 'image3.jpg']);
    setPreviewVisible(true);
  };

  const handlePreview = (image) => {
    setPreviewImage(image);
  };

  const handlePreviewCancel = () => {
    setPreviewVisible(false);
  };

  return (
    <div>
      <Button onClick={handleButtonClick}>点击加载图片</Button>
      <Image.PreviewGroup preview={{ visible: previewVisible, onVisibleChange: (visible) => setPreviewVisible(visible) }}>
        {images.map((image, index) => (
          <Image
            key={index}
            src={image}
            onClick={() => handlePreview(image)}
          />
        ))}
      </Image.PreviewGroup>
      <Modal visible={previewVisible} footer={null} onCancel={handlePreviewCancel}>
        <img alt="预览图" style={{ width: '100%' }} src={previewImage} />
      </Modal>
    </div>
  );
};

export default MyComponent;

在上面的代码中，我们使用useState来创建了三个状态变量：images用于存储从后端获取的图像数组，previewVisible用于控制预览图像的显示与隐藏，previewImage用于存储当前预览的图像。

当点击按钮时，我们调用handleButtonClick函数来模拟从后端获取图像数组。然后通过使用setImages来更新images的状态，并将previewVisible设置为true，以显示预览图像。

在图像数组的map函数中，我们使用Image组件来渲染每个图像，并将其传递给handlePreview函数来设置当前预览的图像。

最后，我们使用Modal组件来显示预览图像的弹出框。在Modal组件中，我们根据previewVisible状态来控制其显示与隐藏，并在取消预览时调用handlePreviewCancel函数。

请注意，上述代码是一个示例，您需要根据您的实际需求进行适当的修改和调整。希望能对您有所帮助！