React组件渲染时state两次变更，该现象是否符合预期？

不用慌，这种先输出旧标记对象、再输出新对象的情况，在处理异步状态更新时非常常见，核心原因和React的状态更新时机以及渲染触发逻辑有关，我给你拆解下整个流程：

背后的逻辑链 #

• 当你提交表单时，触发的处理函数里，地址转经纬度、发起JSON请求这些都是异步操作——也就是说，这些操作不会阻塞代码执行，浏览器会先继续处理其他任务（比如当前的渲染流程）。
• 在异步请求还没返回结果时，React的状态还没更新，所以此时如果有渲染触发（比如表单提交时可能伴随的其他状态变化，比如isSubmitting设为true，或者React的合成事件结束后的批量更新检查），render里的console.log就会输出旧的标记对象。
• 当异步请求完成，你调用setMarker更新状态后，React会触发一次新的渲染，这时候render里就会输出最新的标记对象了。

举个代码例子帮你理解 #

假设你的组件逻辑大概是这样：

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

const handleSubmit = async (e) => {
  e.preventDefault();
  // 第一步：同步更新提交状态，触发第一次渲染
  setIsSubmitting(true);
  
  // 第二步：异步操作（地址转经纬度 + 请求标记）
  const coords = await convertAddressToLatLng(formData.address);
  const newMarkerData = await fetch("/api/marker", {
    method: "POST",
    body: JSON.stringify(coords)
  }).then(res => res.json());
  
  // 第三步：更新标记状态，触发第二次渲染
  setMarker(newMarkerData);
  setIsSubmitting(false);
};

// 渲染时的日志
console.log("当前标记对象：", marker);

在这个例子里，第一次渲染（setIsSubmitting(true)触发）时，marker还是旧值；第二次渲染（setMarker触发）时，才会输出新的标记对象。

如何验证？ #

你可以在handleSubmit里的各个阶段加日志，就能清晰看到顺序：

const handleSubmit = async (e) => {
  e.preventDefault();
  console.log("开始提交，当前marker：", marker); // 这里也是旧值
  setIsSubmitting(true);
  console.log("设置isSubmitting后，暂未触发渲染");
  
  const coords = await convertAddressToLatLng(formData.address);
  const newMarkerData = await fetchMarker(coords);
  
  console.log("请求完成，准备更新marker");
  setMarker(newMarkerData);
};

总结一下：这种两次日志输出（旧→新）完全符合React的异步状态更新和渲染机制，是正常的预期行为～

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