Next.js客户端组件中CldUploadButton存secure_url到useState为空数组

核心问题 #

1. 初始状态类型错误：你用useState({})初始化了对象类型的状态，但实际需要存储图片数组，导致后续计算长度时出错。
2. 循环逻辑错误：onSuccess里用Object.keys(images).length作为循环次数，第一次上传时images是空对象，长度为0，循环根本不执行，所以最终得到空数组。
3. 表单数据传递错误：隐藏输入框用defaultValue绑定数组，不仅只会初始化一次，还会把数组转成无效的字符串（如[object Object]），无法正确传递数据。

修正后的代码 #

export default function AddPost({ userId }) {
  // 初始状态改为空数组，匹配存储图片列表的需求
  const [images, setImages] = useState([]);  

  return (
    <div>
      <form action={createPost} className="flex w-full">
        <input type="hidden" name="userId" defaultValue={userId} />
        <input type="text" name="title" placeholder="Title" />

        <textarea
          type="text"
          name="content"
          placeholder="Content"
          className="p-8"
        />

        <CldUploadButton
          uploadPreset="bkklcz9f"
          options={{
            sources: ["local"],
            multiple: true,
            maxFiles: 4,
          }}      
        
          onSuccess={(result) => {
            // 直接遍历上传结果result，提取每个文件的secure_url
            const newImages = result.map(item => ({
              imageUrl: item.secure_url
            }));
            // 更新状态为新的图片数组
            setImages(newImages);
          }}
        />

        {/* 用value绑定状态，转成JSON字符串确保表单提交时数据正确 */}
        <input 
          type="hidden" 
          name="imageUrl" 
          value={JSON.stringify(images)} 
        />
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}

额外优化建议 #

• 添加图片预览：上传成功后渲染已上传的图片，让用户直观看到上传结果。
• 处理上传错误：监听onError事件，捕获上传失败的情况并提示用户。
• 支持追加上传：如果需要保留之前上传的图片，把状态更新逻辑改成setImages(prev => [...prev, ...newImages])。

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