PrimeReact File Upload组件setUploadedFiles显示异常问题求助

问题原因 #

开启customUpload后，PrimeReact会默认保留待处理上传的文件列表，而你在uploadHandler中直接将文件添加到mediaList，再通过setUploadedFiles同步到组件时，旧的待处理文件没有被清除，导致待处理和已完成文件同时显示，出现重复。另外，你在uploadHandler里用map循环调用setMediaList，会触发多次状态更新，也可能引发不必要的渲染和数据异常。

解决方案 #

1. 上传完成后手动清除组件的待处理文件列表，避免新旧文件叠加
2. 一次性更新mediaList，不要循环调用状态更新
3. 给上传完成的文件标记status: 'done'，让组件识别为已完成状态

修改后的代码如下：

const fileUploadRef = useRef(null)
// Media Upload
const [mediaList, setMediaList] = useState([]);

useEffect(() => {
    if (fileUploadRef.current) {
        fileUploadRef.current.setUploadedFiles(mediaList);
    }
}, [mediaList]);

const handleUpload = async (e) => {
    // 替换成你的实际上传API逻辑
    const uploadedFiles = await Promise.all(e.files.map(async (file) => {
        // 这里执行上传请求，比如await fetch(...)
        // 上传完成后标记文件状态为已完成
        return { ...file, status: 'done' };
    }));

    // 一次性更新已上传文件列表
    setMediaList(prev => [...prev, ...uploadedFiles]);
    // 清除组件的待处理文件列表，彻底避免重复
    fileUploadRef.current?.clear();
};

return (
    <FileUpload
        ref={fileUploadRef}
        className={`w-full`}
        name="demo[]"
        customUpload={true}
        onRemove={(event) => {
            const fileToRemove = event.file;
            const updatedFiles = mediaList.filter(
                (file) => file.name !== fileToRemove.name
            );
            setMediaList(updatedFiles);
        }}
        uploadHandler={handleUpload}
        onUpload={() => {
            console.log('upload completed');
        }}
        multiple 
        accept="image/*"
        maxFileSize={1000000}
    />
);

关键说明 #

• 用Promise.all批量处理上传，确保所有文件上传完成后再统一更新状态
• 调用fileUploadRef.current.clear()清空待处理列表，从根源避免重复显示
• 给文件添加status: 'done'属性，让组件正确渲染已完成的样式状态

内容的提问来源于stack exchange，提问作者Ibra