在 Cloudinary 上传小部件回调中访问 useState 状态答案

【问题标题】：Accessing useState state inside a Cloudinary upload widget callback在 Cloudinary 上传小部件回调中访问 useState 状态
【发布时间】：2021-04-12 18:19:30
【问题描述】：

我在 React 组件中使用 Cloudinary upload widget 来上传图片，一旦上传了这些图片，我想运行一些代码：

const showWidget = (e) => {
    e.preventDefault();
const widget = window.cloudinary.createUploadWidget(
      {
        cloudName,
        uploadPreset,
      },
      uploadCallback
    );
    widget.open();
  };

我的问题是组件的状态（使用useState 定义）在uploadCallback() 中似乎不可用：

const [ uploaded, setUploaded ] = useState([]);

const uploadCallback = (error, result) => {
  setUploaded([...uploaded, ...result.photos]);
}

回调可以触发多次（每次图片上传完成一次），我想每次都将上传的图片添加到状态，但是回调里面uploaded总是等于它的默认值@ 987654328@，这意味着对setUploaded() 的每次调用都会覆盖它而不是添加它。

有没有办法让这个回调在 React 状态下正常工作？还是归结为小部件库如何调用回调而我无能为力？

【问题讨论】：

对不起我的错误。
如果您使用uploaded 调用showWidget 并在uploadCallback 中使用该变量会怎样？ <button onClick={(e)=> showWidget(e, uploaded)}>Upload</button>
另外，您确定可以这样使用uploadCallback: 吗？根据文档，它只是一个回调函数，没有 uploadCallback 道具。基本上，您应该摆脱 uploadCallback: 并在那里调用函数。
刚刚创建了一个CodeSandbox。替换 uploadPreset 和 cloudName 并尝试一下。这个对我有用。您会注意到，每次更新时都会记录图片数组。
你说得对，我在这里复制粘贴代码时犯了一个错误。我还会检查 CodeSandbox，谢谢！

标签： reactjs callback react-hooks cloudinary

【解决方案1】：

我不确定这是否是处理此问题的最佳方法，但这就是我最终要做的。问题是组件的本地状态只包含最后上传的照片，而不是包含所有照片，所以我决定使用它并重命名变量：

const [ lastUploaded, setLastUploaded ] = useState([]);

然后有一个单独的 useEffect 钩子来更新另一个组件（这就是我一开始就想做的）：

  // whenever local state changes, update global form state as well
  useEffect(() => {
      updateCurrentValues({ [path]: [...value, ...lastUploaded] });
  }, [lastUploaded]);

请注意，解决此问题的另一种方法是将setLastUploaded([...lastUploaded, ...newPhotos]) 替换为setLastUploaded(lastUploaded => [...lastUploaded, ...newPhotos])。我实际上并不知道你可以做到这一点，即使我最终没有使用它，希望它可以帮助其他人。

【讨论】：