javascript - 尽管已更新，但 React useState 钩子(Hook)仍返回旧状态值

Question

我想:

1. 将图像上传到浏览器(我使用 React Dropzone 执行此操作。我下面的 uploadImage 函数运行 onDrop of file into Dropzone。)
2. 使用 FileReader API 将图像作为实际图像读取。
3. 使用 React Hooks 将图像文件和图像元数据保存到状态中。
4. 进行 API 调用，将此图像推送到服务器。

我试图在第 4 步确认我有图像，但我无法通过我的控制台消息确认。尽管日志消息显示状态已经更新，但我还是坚持使用原始状态值。

我已经尝试为所有内容添加额外的异步，并且我已经将内容包装在 promises 中。我可以确认 readImage 函数没问题。我可以确认运行顺序是 readImage、saveImage、saveImage 中的 setGraphic，然后是 uploadImage 中的 console.log > 应该有更新的值但没有。

  const [graphic, setGraphic] = useState({ ...nullGraphic });

  const readImage = async (img) => {
    const reader = new FileReader();

    return new Promise((resolve, reject) => {
      reader.onerror = () => reader.abort();
      reader.onabort = () => reject(new DOMException('Problem parsing input file.'));
      reader.onload = () => resolve(reader.result);
      reader.readAsDataURL(img);
    });
  };

  const saveImage = async (img) => {
    const imageRead = await readImage(img);

    console.log(imageRead);

    await setGraphic({
      ...graphic,
      image: imageRead,
      imageName: img.name,
      imageType: img.type,
    });

  };


  const uploadImage = async (img) => {
    await saveImage(img);

    console.log(graphic);
});

render() {

  console.log(graphic);

  return( <some dom> )
}

这是我奇怪的控制台序列:

Form.js:112 starting saveImage 
Form.js:95 (snipped value of imageRead)
Form.js:237 {snipped updated values of graphic}
Form.js:114 done with saveImage
Form.js:116 {snipped original values of graphic}

我的理论

useState Hook 正在做一些时髦的事情。该进程在启动时复制该值，而不是在读取 console.log 时读取它，因此 uploadImage 函数在该进程的生命周期内获取 useState Hook 的原始值。

Answer 1

如果我们将所有这些 React 魔法简化为:

  function withState(initial, fn) {
    function setState(updated) {
       setTimeout(() => fn(updated, setState), 0);
       //...
    }
    setState(initial);
  }

现在我们可以说明发生了什么:

  withState(0, (counter, setCount) => {
    console.log("before", counter);
    if(counter < 10) setCount(counter + 1);
    console.log("after", counter);
  });

如您所见，setCount 不会直接更改状态 (count)。它实际上根本不会更改本地 count 变量。因此，“之前”和“之后”将始终记录相同的内容(只要您不直接改变 counter)。

相反，调用 setCount 将被推迟(并在 React 中进行批处理)，然后它将召回整个组件函数传递新的计数。

因此，尝试await setState 调用是没有意义的，记录它之前和之后的状态也是没有意义的(因为它不会在两者之间改变)。在组件中记录一次，如果您设置状态，整个组件将再次执行，并且日志记录将记录新状态。