React中如何确保状态赋值完成后再调用后端API？

问题根源 #

React的useState更新是异步批量执行的，调用setItem(comingItemValue)后，item状态不会立刻更新。你紧接着调用submitHandler，此时用的还是旧的item值，自然会出现API先执行的问题。另外，直接用document.getElementById获取输入值不是React的最佳实践，推荐用受控组件管理表单状态。

方案1：直接使用获取到的输入值（最简便） #

既然你已经拿到了comingItemValue，没必要等状态更新，直接把这个值传给submitHandler即可：

// 定义状态
const [item, setItem] = useState("");

// 点击处理函数
const itemInputOnClickHandler = () => {
  const comingItemValue = document.getElementById('item-input').value;
  setItem(comingItemValue);
  // 直接传值给API调用函数
  submitHandler(comingItemValue);
}

// API调用函数接收参数
const submitHandler = async (value) => {
  await axios.post("API_URL", { item: value });
}

// 按钮
<Button label="submit" onClick={itemInputOnClickHandler} className="m-3 btn" />

方案2：改用受控组件（React推荐方式） #

把输入框改成受控组件，让item状态和输入值双向绑定，这样点击提交时item已经是最新值，直接调用API即可：

const [item, setItem] = useState("");

// 输入框 onChange 处理
const handleInputChange = (e) => {
  setItem(e.target.value);
}

// 点击提交
const itemInputOnClickHandler = async () => {
  // 此时item已经是最新的输入值
  await submitHandler();
}

const submitHandler = async () => {
  await axios.post("API_URL", { item });
}

// 输入框+按钮
<input 
  id="item-input" 
  value={item} 
  onChange={handleInputChange} 
/>
<Button label="submit" onClick={itemInputOnClickHandler} className="m-3 btn" />

方案3：用useEffect监听状态变化（适合必须等状态更新后的场景） #

如果你的场景必须依赖item状态更新完成后再执行API（比如状态更新后还要做其他UI相关操作），可以用useEffect监听item的变化：

const [item, setItem] = useState("");
// 标记是否是初始渲染
const [isFirstRender, setIsFirstRender] = useState(true);

const itemInputOnClickHandler = () => {
  const comingItemValue = document.getElementById('item-input').value;
  setItem(comingItemValue);
}

const submitHandler = async () => {
  await axios.post("API_URL", { item });
}

// 监听item变化
useEffect(() => {
  // 跳过初始渲染时的调用
  if (isFirstRender) {
    setIsFirstRender(false);
    return;
  }
  // 状态更新后调用API
  submitHandler();
}, [item]); // 依赖项为item，当item变化时执行

总结 #

优先用方案1或方案2，尤其是方案2，符合React的数据流管理规范，避免直接操作DOM。方案3只在必须依赖状态更新完成的特殊场景下使用。

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