React函数组件中点击X按钮后setState同步触发sendQuery的问题

方案1：给sendQuery传递参数（最直接高效） #

既然问题根源是依赖异步更新的state，那干脆绕过state依赖，直接把查询值作为参数传给sendQuery，不管是搜索还是清空操作，都明确传入对应的值：

修改sendQuery函数：

function sendQuery(searchValue) {
  fetch(`${url}/?search=${searchValue}`, { method: 'GET' })
    .then(response => response.json())
    .then(
      (result) => {
        setIsLoaded(true);
        setError(false);
        setUsersList(result);
      },
      (error) => {
        setIsLoaded(true);
        setError(error);
      }
    );
}

调整两个按钮的点击逻辑：

// 搜索按钮：传入当前的searchOption值
<Button variant="outline-secondary" size="lg" className='input-group-text' onClick={() => sendQuery(searchOption)}>search</Button>

// 清空按钮：先更新state，再传入空字符串触发查询
<Button variant="outline-secondary" size="lg" className='input-group-text me-5' onClick={() => {
  setSearchOption("");
  sendQuery("");
}}>X</Button>

这个方案完全避开了state异步更新的问题，逻辑直白，也不会触发不必要的请求。

方案2：用额外状态控制的useEffect（适合必须依赖state的场景） #

如果一定要等searchOption更新后再触发查询，可以新增一个专门的状态标记「是否是清空操作触发的查询」，避免searchOption每次变化都发起请求：

首先新增状态：

const [triggerClearQuery, setTriggerClearQuery] = useState(false);

修改clearSearchField函数：

function clearSearchField() {
  setSearchOption("");
  setTriggerClearQuery(true); // 标记需要触发清空后的查询
}

编写对应的useEffect：

useEffect(() => {
  if (triggerClearQuery) {
    sendQuery();
    setTriggerClearQuery(false); // 重置标记，防止重复触发
  }
}, [triggerClearQuery, searchOption]);

这个方案仅在点击X按钮触发triggerClearQuery时才会调用查询，不会因为其他操作修改searchOption而发起请求。

问题根源说明 #

React的setState是异步批量更新机制，在clearSearchField中调用setSearchOption("")后，searchOption不会立刻更新，所以紧接着调用的sendQuery会使用旧的state值，导致查询参数不符合预期。

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