如何访问已调用 setState 的函数主体中的更新状态？

Question

我目前正在编写一个函数，用于将 blogPost 对象保存到我的 Firestore 数据库中的 document 中。

预期的例程应该是：

• 点击保存按钮并调用savePost()函数
• savePost() 函数应该调用 uploadImagesAndGetURL() 函数，因为在我将 src URL 保存到 Firestore 之前，应该将 blogPost 的图像上传到 Firebase 存储。 （在我的真实情况下，图片上传是async 和我await 来完成，但我认为这不会影响这里的示例）。
• uploadImagesAndGetURL() 应该上传图像并将返回的urls 存储在它们各自的src 属性中，在state 的elements 数组中。
• 它通过在 elements 数组上运行 forEach() 并调用 setState() (setBlogPost) 以使用从存储中接收到的新 URL 来更新状态。
• 然后将调用saveToFirestore() 函数，并且应该能够访问最新状态，以便能够将blogPost 对象与图像src's 一起保存到数据库中。

问题

我的问题是，当我运行 savePost() 函数时，在这种情况下组件被重新渲染 3 次（对于 3 张图像），因为 uploadImagesAndGetURL() 正在调用 setBlogPost() 3 次。每个图像一个。当我到达saveToFirestore() 函数并记录blogPost 状态时，您可以看到只有第一张图像src 发生了变化。

我做得对吗？我如何改进此例程以确保在saveToFirestore() 之前所有内容都已更新？

注意： 一种方法是跳过状态更新并将返回的 URL 直接传递给 saveToFirestore() 函数，而无需将它们存储在状态中。但是，在这种情况下，合适的模式是什么？

来自saveToFirestore() 函数的日志：

{
  "title": "This is the title",
  "body": "Click on the button to upload this post",
  "elements": [
    {
      "type": "image",
      "src": "source0"
    },
    {
      "type": "image",
      "src": null
    },
    {
      "type": "image",
      "src": null
    }
  ]
}

以下片段

function App() {
  console.log('Rendering App...');
  const [blogPost,setBlogPost] = React.useState({
    title: 'This is the title',
    body: 'Click on the button to upload this post',
    elements: [
      { type: 'image',
        src: null 
      },
      { type: 'image',
        src: null
      },
      { type: 'image',
        src: null 
      }
    ]
  });

  function savePost() {
    console.log('Inside savePost');
    uploadImagesAndGetURL();
    saveToFirestore();
  }
  
  function uploadImagesAndGetURL() {
    console.log('Inside uploadImages');
    blogPost.elements.forEach((item,index) => {
      console.log('Inside uploadImages - forEach');
      setBlogPost((prevState)=>{
        const aux = Array.from(prevState.elements);
        aux[index].src = 'source' + index;
        return({
          ...prevState,
          elements: aux
        });
      });
    });
  }
  
  function saveToFirestore() {
    console.log('Inside saveToFirestore');
    console.log('Will save the following blogPost to Firestore');
    console.log(blogPost);
  }

  return(
    <React.Fragment>
      <div>{blogPost.title}</div>
      <div>{blogPost.body}</div>
      <div>Image 1 src: {blogPost.elements[0].src}</div>
      <div>Image 2 src: {blogPost.elements[1].src}</div>
      <div>Image 3 src: {blogPost.elements[2].src}</div>
      <button onClick={savePost}>Save Post</button>
    </React.Fragment>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 1

您可以在更改博客状态时在 useEffect 挂钩中移动保存逻辑，它会触发效果运行。

关注

import React, { useEffect } from "react";
import ReactDOM from "react-dom";

function App() {
  console.log("Rendering App...");
  const [blogPost, setBlogPost] = React.useState({
    title: "This is the title",
    body: "Click on the button to upload this post",
    elements: [
      { type: "image", src: null },
      { type: "image", src: null },
      { type: "image", src: null }
    ]
  });

  function savePost() {
    console.log("Inside savePost");
    uploadImagesAndGetURL();
    // saveToFirestore();
  }

  function uploadImagesAndGetURL() {
    console.log("Inside uploadImages");
    const elements = blogPost.elements.map((_, index) => ({
      type: "image",
      src: `source${index}`
    }));
    setBlogPost(previousPost => ({ ...previousPost, elements }));
  }

  // function uploadImagesAndGetURL() {
  //   console.log("Inside uploadImages");
  //   blogPost.elements.forEach((item, index) => {
  //     console.log("Inside uploadImages - forEach");
  //     setBlogPost(prevState => {
  //       const aux = Array.from(prevState.elements);
  //       aux[index].src = "source" + index;
  //       return {
  //         ...prevState,
  //         elements: aux
  //       };
  //     });
  //   });
  // }

  useEffect(() => {
    function saveToFirestore() {
      console.log("Inside saveToFirestore");
      console.log("Will save the following blogPost to Firestore");
      console.log(blogPost);
    }
    saveToFirestore();
  }, [blogPost]);

  return (
    <React.Fragment>
      <div>{blogPost.title}</div>
      <div>{blogPost.body}</div>
      <div>Image 1 src: {blogPost.elements[0].src}</div>
      <div>Image 2 src: {blogPost.elements[1].src}</div>
      <div>Image 3 src: {blogPost.elements[2].src}</div>
      <button onClick={savePost}>Save Post</button>
    </React.Fragment>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

uploadImagesAndGetURL() 调用 setBlogPost() 3 次。

而且我实际上会获取 URL 列表并一次性设置 elements 属性以防止重新渲染 3 次。