|
@@ -1,4 +1,4 @@
|
|
|
-import React, { useState, useEffect } from 'react';
|
|
|
|
|
|
|
+import React, { useState, useEffect, useRef } from 'react';
|
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
|
import { Button } from '@/client/components/ui/button';
|
|
import { Button } from '@/client/components/ui/button';
|
|
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/client/components/ui/dialog';
|
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/client/components/ui/dialog';
|
|
@@ -50,6 +50,7 @@ export const ImageSelector: React.FC<ImageSelectorProps> = ({
|
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
const [selectedFile, setSelectedFile] = useState<FileType | null>(null);
|
|
const [selectedFile, setSelectedFile] = useState<FileType | null>(null);
|
|
|
const [localSelectedFiles, setLocalSelectedFiles] = useState<number[]>(selectedFiles);
|
|
const [localSelectedFiles, setLocalSelectedFiles] = useState<number[]>(selectedFiles);
|
|
|
|
|
+ const prevSelectedFilesRef = useRef(selectedFiles);
|
|
|
|
|
|
|
|
// 获取当前选中的文件详情
|
|
// 获取当前选中的文件详情
|
|
|
const { data: currentFile } = useQuery({
|
|
const { data: currentFile } = useQuery({
|
|
@@ -63,19 +64,33 @@ export const ImageSelector: React.FC<ImageSelectorProps> = ({
|
|
|
enabled: !!value,
|
|
enabled: !!value,
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
+
|
|
|
// 当对话框打开时,设置当前选中的图片
|
|
// 当对话框打开时,设置当前选中的图片
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
- if (isOpen && value && currentFile && (!selectedFile || selectedFile.id !== currentFile.id)) {
|
|
|
|
|
- setSelectedFile(currentFile);
|
|
|
|
|
|
|
+ if (isOpen) {
|
|
|
|
|
+ if (allowMultiple) {
|
|
|
|
|
+ setLocalSelectedFiles(selectedFiles);
|
|
|
|
|
+ } else if (value && currentFile) {
|
|
|
|
|
+ setSelectedFile(currentFile);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- }, [isOpen, value, currentFile, selectedFile]);
|
|
|
|
|
|
|
+ }, [isOpen, value, currentFile, allowMultiple]);
|
|
|
|
|
+
|
|
|
|
|
|
|
|
- // 当allowMultiple模式下的selectedFiles变化时
|
|
|
|
|
|
|
+ // 修复无限循环问题:使用ref比较数组内容
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
- if (JSON.stringify(localSelectedFiles) !== JSON.stringify(selectedFiles)) {
|
|
|
|
|
|
|
+ const areArraysEqual = (a: number[], b: number[]) => {
|
|
|
|
|
+ if (a.length !== b.length) return false;
|
|
|
|
|
+ const sortedA = [...a].sort();
|
|
|
|
|
+ const sortedB = [...b].sort();
|
|
|
|
|
+ return sortedA.every((val, index) => val === sortedB[index]);
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ if (!areArraysEqual(prevSelectedFilesRef.current, selectedFiles)) {
|
|
|
setLocalSelectedFiles(selectedFiles);
|
|
setLocalSelectedFiles(selectedFiles);
|
|
|
|
|
+ prevSelectedFilesRef.current = selectedFiles;
|
|
|
}
|
|
}
|
|
|
- }, [selectedFiles, localSelectedFiles]);
|
|
|
|
|
|
|
+ }, [selectedFiles]);
|
|
|
|
|
|
|
|
// 获取图片列表
|
|
// 获取图片列表
|
|
|
const { data: filesData, isLoading, refetch } = useQuery({
|
|
const { data: filesData, isLoading, refetch } = useQuery({
|