React：await异步操作后useState首次点击不更新的问题与解决

问题描述 #

我有一个Confirm组件，包含提示信息和确认删除代理的按钮。点击按钮会触发confirmHandler，调用父组件的异步函数deleteAgent。该函数调用后端接口后，需通过setFlagDelete(false)更新标志位以隐藏提示信息。

当前问题：删除操作成功执行，但useState的flagDelete状态在首次点击“确认”按钮时未更新，第二次点击才生效；移除await后功能恢复正常。需要在保留await的前提下解决该问题。

相关代码 #

父组件删除函数

const deleteAgent = async () => {
  try{
    await fetch("http://localhost:5000/deleteagent", {
      method: "DELETE",
      headers: {
        "Content-Type" : "application/json"
      },
      body: JSON.stringify({
        tz: agentToDelete.id
      })
    })
    var index;
    for(let i = 0; i < allAgents.length; i++){
      if(allAgents[i].tz == agentToDelete.id){
        index = i;
       }
     }
    updateAllAgents([...allAgents.slice(0, index), ...allAgents.slice(index + 1)]);
    for(let j = 0; j < allCities.length; j++){
      if(allCities[j] == agentToDelete.city){
        index = j;
      }
    }
    updateAllCities([...allCities.slice(0, index), ...allCities.slice(index + 1)]);
    setFlagDelete(false);
    
  } catch (err){
    console.log(err);
  };
};

父组件渲染逻辑

{(flagDelete == true) && <Confirm agent={agentToDelete} cancel={cancelDelete} confirm={deleteAgent} />}

Confirm组件代码

import React from "react";
import styles from "./Confirm.module.css";

const Confirm = (props) => {
  const cancelHandler = () => {
    props.cancel();
  };

  const confirmHandler = () => {
    props.confirm();
  };

  return(
    <div className={styles.container}>
      <p className={styles.text}>Are you sure you want to delete {props.agent.fname} {props.agent.lname}, id: {props.agent.id} ? </p>
      <div className={styles.buttons}>
        <button type="button" onClick={confirmHandler}>Confirm</button>
        <button type="button" onClick={cancelHandler}>Cancel</button>
      </div>
    </div>
  );
};

export default Confirm;

问题原因 #

核心问题是闭包捕获了旧的state值：

1. 当deleteAgent函数被创建时，它会捕获当前组件的allAgents、allCities、agentToDelete等state的快照。
2. 使用await等待fetch请求完成时，后续执行的updateAllAgents/updateAllCities会触发组件重新渲染，生成新的deleteAgent函数实例，但原来的deleteAgent仍在执行。
3. 当原deleteAgent执行到setFlagDelete(false)时，它修改的是闭包中捕获的旧state快照，无法同步到当前已经重新渲染的组件实例中，导致首次点击后看不到状态变化；第二次点击时调用的是新的deleteAgent函数，基于最新的state执行，因此状态更新生效。

移除await后，setFlagDelete(false)会同步执行，Confirm组件立刻被卸载，不会触发后续的组件重新渲染，因此不会出现闭包问题。

解决方案 #

通过函数式更新获取最新state和避免依赖闭包中的state值来解决：

1. 使用函数式更新修改数组state #

React的setState支持传入函数，函数会接收最新的state值作为参数，确保操作基于最新数据：

const deleteAgent = async () => {
  try{
    await fetch("http://localhost:5000/deleteagent", {
      method: "DELETE",
      headers: {
        "Content-Type" : "application/json"
      },
      body: JSON.stringify({
        tz: agentToDelete.id
      })
    });

    // 用函数式更新获取最新的agents数组，直接过滤掉要删除的项
    updateAllAgents(prevAgents => 
      prevAgents.filter(agent => agent.tz !== agentToDelete.id)
    );

    // 同理更新cities数组
    updateAllCities(prevCities => 
      prevCities.filter(city => city !== agentToDelete.city)
    );

    setFlagDelete(false);
  } catch (err){
    console.log(err);
  };
};

2. （可选）将agent作为参数传入deleteAgent #

进一步避免依赖闭包中的agentToDelete，直接从Confirm组件传入当前代理对象：

• 修改Confirm组件的confirmHandler：

const confirmHandler = () => {
  props.confirm(props.agent);
};

• 修改父组件的deleteAgent：

const deleteAgent = async (agent) => {
  try{
    await fetch("http://localhost:5000/deleteagent", {
      method: "DELETE",
      headers: {
        "Content-Type" : "application/json"
      },
      body: JSON.stringify({
        tz: agent.id
      })
    });

    updateAllAgents(prevAgents => 
      prevAgents.filter(a => a.tz !== agent.id)
    );

    updateAllCities(prevCities => 
      prevCities.filter(c => c !== agent.city)
    );

    setFlagDelete(false);
  } catch (err){
    console.log(err);
  };
};

这样修改后，deleteAgent不再依赖闭包中的旧state值，而是始终基于最新的state和传入的agent对象执行操作，确保setFlagDelete(false)能正确更新状态，隐藏Confirm组件。

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