React状态更新后，patch请求仍提交旧数据的问题求助

Redux的dispatch会同步触发reducer更新状态，但组件通过useSelector获取的新状态要等到下一次组件渲染才会更新。你在按钮点击事件里连续调用updateNodeHandler和saveChangesHandler，这两个函数处于同一个组件渲染周期的闭包中，saveChangesHandler里的elements还是当前闭包的旧值——此时组件还没重新渲染，新的elements还未生成。

提供两种实用的解决思路：

思路1：手动计算更新后的数据，直接传入保存函数 #

不需要等组件重新渲染，在点击事件里直接计算出更新后的elements，传给saveChangesHandler使用：

修改按钮点击逻辑 #

<button
  type="submit"
  disabled
  onClick={() => {
    if (!activeNode) return;
    // 构造要更新的节点数据
    const updatedNode = { id: activeNode.id, text: newtext };
    // 触发Redux状态更新
    dispatch(editStep(updatedNode));
    // 手动计算更新后的elements数组
    const updatedElements = elements.map(step => 
      step.id === updatedNode.id ? updatedNode : step
    );
    // 传入更新后的数据执行保存
    saveChangesHandler(updatedElements);
  }}
>
  Save Changes
</button>

修改saveChangesHandler #

const saveChangesHandler = (updatedElements) => {
  const steps = { "steps": updatedElements };
  getAuthorization()
    .patch(`product/save_data/${ID}/`, steps)
    .catch((err) => {
      console.log("err", err);
    });
};

思路2：用useEffect监听状态变化，触发保存 #

通过状态标记控制，当elements更新后自动执行保存请求：

添加状态标记和useEffect #

import { useState, useEffect } from 'react';

// ...其他代码

const [triggerSave, setTriggerSave] = useState(false);

// 监听elements和triggerSave的变化，触发保存
useEffect(() => {
  if (triggerSave) {
    const steps = { "steps": elements };
    getAuthorization()
      .patch(`product/save_data/${ID}/`, steps)
      .catch((err) => {
        console.log("err", err);
      });
    // 重置标记，避免重复触发
    setTriggerSave(false);
  }
}, [elements, triggerSave, ID]);

// 修改按钮点击事件
<button
  type="submit"
  disabled
  onClick={() => {
    updateNodeHandler();
    // 设置标记，触发useEffect里的保存逻辑
    setTriggerSave(true);
  }}
>
  Save Changes
</button>

• 你之前尝试的async/await没用，因为dispatch本身是同步执行的，但组件状态更新是渲染层面的异步操作，await dispatch不会等待组件重新渲染。
• 把saveChangesHandler放进updateNodeHandler也无效，因为它们仍处于同一闭包，elements还是旧值。

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