React（Native）点击清除按钮后如何获取最新清空状态值并调用API？

问题根源 #

useState的状态更新是异步批量处理的——在同一个事件回调里，调用setSearchValue后立刻访问searchValue，拿到的还是更新前的旧值。这就是点击清除按钮时，先清空状态再调用onSubmit却拿不到空字符串的核心原因。

解决方案 #

方案1：直接传递清空后的值给onSubmit

这是最简洁的方案，完全匹配你“仅提交时触发API”的需求。在清除按钮的点击事件里，不用依赖组件状态，直接把空字符串作为参数传给onSubmit：

const handleClear = () => {
  setSearchValue('');
  onSubmit(''); // 直接传入清空后的值，跳过状态异步更新的等待
};

这种方式不需要额外Hook，逻辑清晰，彻底避开了状态异步更新的问题，且只有点击清除（属于提交操作）时才触发API，完全符合你的要求。

方案2：用useRef同步保存最新值（适合复用提交逻辑）

如果你的onSubmit逻辑需要和其他场景（比如输入回车、点击搜索按钮）复用，可以用useRef同步保存输入框的最新值——useRef的.current属性是同步更新的，不会受useState异步批量更新的影响。

步骤如下：

1. 创建ref保存输入值：

import { useRef, useState } from 'react';

const SearchComponent = () => {
  const [searchValue, setSearchValue] = useState('');
  const searchValueRef = useRef(''); // 同步保存最新值的ref

2. 在输入框onChangeText回调中同时更新状态和ref：

const handleChangeText = (text) => {
  setSearchValue(text);
  searchValueRef.current = text; // 同步更新ref的值
};

3. 修改onSubmit直接使用ref的当前值：

const onSubmit = () => {
  const currentValue = searchValueRef.current;
  // 调用API，传入currentValue
  console.log('提交的值:', currentValue);
};

4. 清除按钮逻辑保持不变：

const handleClear = () => {
  setSearchValue('');
  onSubmit(); // 此时ref已同步更新为空字符串
};

这个方案确保所有提交场景（正常输入提交、清除提交）都能拿到最新输入值，适合需要复用提交逻辑的复杂场景。

方案3：利用setTimeout延迟调用（不推荐）

如果暂时不想用上面两种方式，也可以通过setTimeout把onSubmit放到下一个事件循环，等待React完成状态更新后再执行：

const handleClear = () => {
  setSearchValue('');
  setTimeout(() => {
    onSubmit(); // 下一个事件循环中，状态已更新完成
  }, 0);
};

⚠️ 注意：这个方案依赖React的事件循环批量更新策略，可靠性不足，不推荐在生产环境使用，除非没有其他更好的选择。

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