Next.js文件上传useState失效求助：无法设置imagePreviews状态

问题根源 #

React的useState状态更新是异步批量执行的，你在调用setImagePreviews(previews)后立刻console.log(imagePreviews)，此时状态还没完成更新，所以打印的始终是初始的空数组[]。

修复方案 #

1. 正确查看更新后的状态
   不要在调用setImagePreviews后立刻打印状态，而是通过useEffect监听状态变化，当状态更新完成后再打印：

   useEffect(() => {
     console.log("更新后的预览链接：", imagePreviews);
   }, [imagePreviews]);
   

   或者直接在组件渲染逻辑中使用状态（比如渲染预览图），组件会在状态更新后自动重新渲染，此时能拿到最新的状态值。

2. 完整修复后的代码

   "use client";
   import Image from "next/image";
   import React, { useState, useEffect } from "react";
   
   const FileUploader = () => {
     const [imagePreviews, setImagePreviews] = useState([]);
   
     // 监听状态变化，打印最新值
     useEffect(() => {
       console.log("当前预览链接：", imagePreviews);
     }, [imagePreviews]);
   
     // 组件卸载时释放对象URL，避免内存泄漏
     useEffect(() => {
       return () => {
         imagePreviews.forEach(url => URL.revokeObjectURL(url));
       };
     }, [imagePreviews]);
   
     function handleFileUpload(e) {
       const files = e.target.files;
       if (!files?.length) return;
       const previews = Array.from(files).map((file) => URL.createObjectURL(file));
       setImagePreviews(previews);
     }
   
     return (
       <div>
         <input type="file" multiple onChange={handleFileUpload} accept="image/*" />
         <div style={{ display: "flex", flexWrap: "wrap", gap: "10px", marginTop: "20px" }}>
           {imagePreviews.map((url, index) => (
             <div key={index} style={{ position: "relative", width: 200, height: 200 }}>
               <Image
                 src={url}
                 alt={`预览图${index + 1}`}
                 fill
                 objectFit="cover"
               />
             </div>
           ))}
         </div>
       </div>
     );
   };
   
   export default FileUploader;
   

额外提示 #

• 给input加上accept="image/*"可以限制仅上传图片文件，过滤非图片类型的文件；
• 必须在组件卸载时调用URL.revokeObjectURL释放创建的临时URL，否则会造成浏览器内存泄漏。

内容的提问来源于stack exchange，提问作者Anteneh Debebe Bekele