React Native中useState异步更新致多次debug仅显最后一条的解决方法

架构老林

2026-7-5

解决React Native中useState异步更新导致多次调用仅显示最后一条的问题

问题原因

核心问题在于useState的更新是异步批量处理的，且直接使用当前状态值更新时，会捕获闭包中的旧状态。在testPressed里连续两次调用debug时，两次调用的debugStr都是初始的"This is a debug string"，因此两次setDebugStr都会生成"TestX\n\nThis is a debug string"，最终后一次更新覆盖前一次，只显示Test2。

解决方案

方案1：使用useState的函数式更新

useState支持传入函数作为更新参数，该函数会接收最新的状态值作为参数，返回新状态。这样每次更新都会基于当前最新状态计算，避免闭包捕获旧值的问题。

修改后的代码：

const [debugStr, setDebugStr] = useState("This is a debug string")

function debug(str){
    // 函数式更新，prevStr为当前最新状态值
    setDebugStr(prevStr => str + '\n\n' + prevStr)
}

function testPressed(){
    debug("Test1")
    debug("Test2")
}

// 组件渲染部分
<Button onPress={testPressed} title='Press me' />
<Text>{debugStr}</Text>

方案2：用数组存储日志再拼接成字符串

如果需要更灵活的日志管理，可以将日志内容存在数组中，渲染时再拼接成带换行的字符串，同样能规避异步更新的闭包问题：

const [debugLogs, setDebugLogs] = useState(["This is a debug string"])

function debug(str){
    // 向数组末尾追加新日志（如需新日志在顶部，替换为 [str, ...prevLogs]）
    setDebugLogs(prevLogs => [...prevLogs, str])
}

function testPressed(){
    debug("Test1")
    debug("Test2")
}

// 渲染时拼接字符串
<Button onPress={testPressed} title='Press me' />
<Text>{debugLogs.join('\n\n')}</Text>