Laravel Inertia中更新表单数据状态后立即提交时的竞态条件问题

嘿，我刚好碰到过这个问题！你这是踩了响应式状态更新异步特性的坑啦～

你遇到的核心问题是：Inertia的useForm基于框架的响应式系统（比如Vue的响应式、React的状态更新），调用setData后，表单的data状态并不会立刻完成更新，而是会被加入到异步更新队列里。这时候你马上调用post，发送的其实还是更新前的旧数据（也就是初始的空idea），自然会报错。

给你两个靠谱的解决方案，都能满足你的需求（不用拆分操作、不用axios） #

方案一：直接提交目标数据（最简洁，推荐）

既然你已经明确知道要提交的idea值是什么，完全可以绕开表单状态更新的步骤，直接把这个值作为请求数据传给post方法。这样既不用等状态更新，也不会有竞态问题：

const handleClick = (index) => {
  // 先拿到要提交的目标值
  const targetIdea = editedIdeas[index] || ideas[index] || '';
  // 直接把数据传入post请求，不用依赖useForm的data状态
  post(route('posts.draftFromIdea'), {
    data: { idea: targetIdea }
  });
};

这个方法完全符合你的要求：一步完成“选idea+提交”的操作，而且是纯Inertia原生方法。

方案二：等待状态更新完成后再提交（适合需要保留表单状态的场景）

如果你之后还要用到这个表单的data状态（比如提交后要在页面上显示这个idea），那可以等响应式状态更新完成后再提交。

• 如果你用的是Vue，用nextTick等待状态更新：

const { data, setData, post } = useForm({ idea: '' });

const handleClick = async (index) => {
  const targetIdea = editedIdeas[index] || ideas[index] || '';
  setData({ idea: targetIdea });
  // 等待Vue完成响应式状态更新
  await nextTick();
  // 现在post的就是更新后的表单数据了
  post(route('posts.draftFromIdea'));
};

• 如果你用的是React，可以用useEffect监听表单数据的变化，等状态更新后再提交：

const { data, setData, post } = useForm({ idea: '' });
const [isReadyToSubmit, setIsReadyToSubmit] = useState(false);

// 监听data的变化，当标记为可提交时发送请求
useEffect(() => {
  if (isReadyToSubmit) {
    post(route('posts.draftFromIdea'));
    setIsReadyToSubmit(false);
  }
}, [data, isReadyToSubmit, post]);

const handleClick = (index) => {
  const targetIdea = editedIdeas[index] || ideas[index] || '';
  setData({ idea: targetIdea });
  // 标记可以提交了
  setIsReadyToSubmit(true);
};

为什么你之前的尝试没成功？ #

• 增加timeout：这是碰运气的做法，状态更新的时间在不同设备、场景下都不一样，这次够下次可能就不够，完全不可靠。
• 传data到post但失败：大概率是你当时获取的newValue不对，或者参数格式没写对（上面方案一的写法是正确的传参方式）。

内容来源于stack exchange