const propsPlanned: UploadProps = { // 确保最多只能选择一个文件 maxCount: 1, beforeUpload: (file) => { // 保存当前选择的文件对象 setCurrentPlannedFile(file); // 阻止默认的自动上传行为 return false; }, onChange: ({ file }) => { if (file.status === 'done') { // 更新到最新文件 setPlannedFile(file as unknown as UploadFile); } }, }; useEffect(() => { if (plannedMessage) { // 消息提示持续时间 const timer = setTimeout(() => { setPlannedMessage(null); }, 5000); return () => clearTimeout(timer); } }, [plannedMessage]);能不能让组件渲染的文件名和message一样五秒后消失
时间: 2025-04-03 16:06:39 浏览: 26
可以实现这个功能,通过在 `onChange` 和 `useEffect` 中协调控制文件名和消息的显示时间。我们可以借助一个额外的状态变量(例如 `fileNameMessage`),并在其生效期间应用相同的超时逻辑。
以下是改进后的代码示例:
```tsx
const [fileNameMessage, setFileNameMessage] = useState<string | null>(null);
const propsPlanned: UploadProps = {
// 确保最多只能选择一个文件
maxCount: 1,
beforeUpload: (file) => {
setCurrentPlannedFile(file);
return false; // 阻止默认的自动上传行为
},
onChange: ({ file }) => {
if (file.status === 'done') {
// 更新到最新文件,并记录文件名作为临时消息
setPlannedFile(file as unknown as UploadFile);
setFileNameMessage(file.name); // 显示文件名
setPlannedMessage({ type: 'success', content: "上传成功" });
// 清理定时器
setTimeout(() => {
setFileNameMessage(null); // 移除文件名消息
setPlannedMessage(null); // 同时移除其他消息
}, 5000);
} else if (file.status === 'error') {
setPlannedMessage({ type: 'error', content: "上传失败" });
}
},
};
// 控制 plannedMessage 的消失
useEffect(() => {
let timer: NodeJS.Timeout | undefined;
if (plannedMessage || fileNameMessage) {
timer = setTimeout(() => {
setPlannedMessage(null); // 消息五秒后消失
setFileNameMessage(null); // 文件名五秒后消失
}, 5000);
}
return () => {
if (timer) clearTimeout(timer); // 组件卸载或状态变化时清理计时器
};
}, [plannedMessage, fileNameMessage]);
```
### 主要改动点说明
1. **新增状态变量 `fileNameMessage`**
我们引入了一个新的状态变量 `fileNameMessage` 来存储当前文件名信息,并在文件上传完成 (`file.status === 'done'`) 或发生错误时对其进行设置。
阅读全文
相关推荐

















