Cloudinary secure_url to useState

Question

在 next.js 客户端组件中，我使用 cloudinary 中的“CldUploadButton”。在“onSuccess”事件中，我尝试循环上传结果，拾取图像“secure_url”，然后为它们分配所有图像状态。由于某种原因，我收到一个空数组。 如果有人有更好的主意，我会很高兴。谢谢。

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) => {
            let arr = [];
            const imageCount = Object.keys(images).length;
            for (let i = 0; i < imageCount; i++) {
              const data = {
                imageUrl: result[i].secure_url,
              };
              arr.push(data);
            }
            setImages(arr);
            
          }}
        />

        <input type="hidden" name="imageUrl" defaultValue={images} />
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}

Answer 1

查看您的代码，我发现您在设置值之前正在迭代 images.length 。所以你的迭代长度为零，并且应该是一个空数组。