如何在 onSubmit 中等待 useState 更新？

Question

我想从网站获取元数据，然后将其上传到数据库。网站 link 来自表单输入字段。

由于 useState 更新是异步的，提交时数据还没有出现在 formData 对象中。

我有什么选择？

正在使用的 npm 包：https://www.npmjs.com/package/suq

const [title, setTitle] = useState("");
const [url, setUrl] = useState("");
const [imgUrl, setImgUrl] = useState("");
   
const handleSubmit = (e) => {
    e.preventDefault();
     suq(
      `${urlToPost}`,
        function (err, json, body) {
        if (!err) {
          setTitle(json.opengraph["og:title"]);
          setUrl(json.opengraph["og:url"])
          setImgUrl(json.opengraph["og:image"]);
        }
      }
    );
    
    const postData = {
      title,
      url,
      imgUrl
    };
    
    db.collection("posts")
      .doc()
      .set(postData)
      .then(() => {
        console.log("Document successfully written!");
      })
      .catch((error) => {
        console.error("Error writing document: ", error);
      });
}

Answer 1

我们无法在同一个调用中直接处理等待状态更新。

因为状态将在重新渲染周期后更新其值。

所以你想用更新后的状态做什么，所以我可以帮助你。

Answer 2

这个怎么样：

const [title, setTitle] = useState("");
const [url, setUrl] = useState("");
const [imgUrl, setImgUrl] = useState("");
   
const handleSubmit = (e) => {
    e.preventDefault();
    
    let submitTitle = '';
    let submitUrl = '';
    let submitImgUrl = '';

     suq(
      "https://www.space.com/first-structures-in-universe-revealed",
        function (err, json, body) {
        if (!err) {
          submitTitle = json.opengraph["og:title"];
          submitUrl = json.opengraph["og:url"];
          submitImgUrl = json.opengraph["og:image"];

          setTitle(submitTitle);
          setUrl(submitUrl)
          setImgUrl(submitImgUrl);
        }
      }
    );
    
    const formData = {
      title: submitTitle,
      url: submitUrl,
      imgUrl: submitImgUrl
    };
    
    console.log(formData);
    // title, url and imgUrl are still at initial value

}

本地状态更新将在下一次渲染中可用，但您需要的值将在您的句柄提交函数中可用

如何在 onSubmit 中等待 useState 更新？

How to wait for a useState update within onSubmit?

reactjs

react-state-management