React问题：如何在setData更新状态后再执行POST请求？

问题核心在于React的状态更新是异步的——调用setData后，data不会立刻变成新值，所以你当前的代码里，fetch发送的还是更新前的旧数据。这里有两种靠谱的解决办法：

方法一：直接使用构造好的新数据（推荐） #

既然我们已经知道要添加的新条目是什么，完全可以先构造出更新后的完整数据，直接用它来发请求，再更新状态。这样不用等异步的状态更新，逻辑更直接：

function handleSubmit(e) {
  e.preventDefault();
  const html = convertToHTML(editorState.getCurrentContent());
  // 先构造要新增的条目
  const newItem = { name: name, content: html };
  // 生成更新后的完整数据数组
  const updatedData = [...data, newItem];

  // 直接用更新后的数据发请求
  fetch("/api2", {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify({ parcel: updatedData }),
  });

  // 最后更新组件状态
  setData(updatedData);
}

方法二：用useEffect监听状态变化 #

如果需要在状态确实更新后再执行请求，可以借助useEffect监听data的变化，但需要额外加一个状态来标记是否是提交触发的更新，避免不必要的请求：

1. 先添加一个提交状态：

const [isSubmitting, setIsSubmitting] = useState(false);

2. 修改提交函数，只更新数据和标记提交状态：

function handleSubmit(e) {
  e.preventDefault();
  const html = convertToHTML(editorState.getCurrentContent());
  setData((current) => [...current, { name: name, content: html }]);
  setIsSubmitting(true);
}

3. 添加useEffect，当data更新且处于提交状态时发送请求：

useEffect(() => {
  if (isSubmitting) {
    fetch("/api2", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ parcel: data }),
    })
    .finally(() => {
      // 请求完成后重置提交状态，避免重复触发
      setIsSubmitting(false);
    });
  }
}, [data, isSubmitting]);

两种方法里，第一种更适合你的提交场景，代码更简洁；第二种则适用于需要在状态更新后执行操作的通用场景。

内容的提问来源于stack exchange，提问作者Joseph Walsh