React中useState清空数组在updateState函数内不生效问题

问题背景 #

实现了A表到B表的数据传输架构（A表-数据中心-B表），数据中心通过useState定义selectedRows（选中行）和transferedRows（已传输行）状态。点击事件中直接调用setSelectedRows([])能正常清空数组，但在API回调后的updateState函数中调用该方法，却无法触发预期的状态更新（或BTable未同步响应）。BTable组件通过useEffect监听selectedRows，当长度为0时清空自身的selectedRowKeys状态。

相关代码 #

数据中心组件代码 #

const [selectedRows, setSelectedRows] = useState<String[]>([])
const [transferedRows, setTransferedRows] = useState<String[]>([])

const onClick = () => {
  onTransfer()
  // 此处调用可正常生效
  // setSelectedRows([])
}

const onTransfer = () => {
  const clone = _.cloneDeep(selectedRows)
  const merge = [...clone, ...transferedRows]
  
  restApi.call() // 调用REST接口
  .then((response) => {
      if (response.result) {
        updateState(merge)
      } else {
        throw new Error()
      }
    })
}

const updateState = (merge: String[]) => {
  let data = _.cloneDeep(merge)
  data.map(()=>{/* 自定义行处理逻辑 */})
  
  selectedRows.map((item) => {/* 自定义行处理逻辑 */})

  setTransferedRows(data)
  // 此处无法触发预期的状态更新
  setSelectedRows([])
 }
...
return (
<>
<BTable
      ...
      selectedRows={selectedRows}
      setSelectedRows={setSelectedRows}
/>
</>
)

BTable组件代码 #

useEffect(() => {
  if (selectedRows.length === 0) {
    setSelectedRowKeys([])
  }
}, [selectedRows])

核心原因与排查方向 #

1. 代码执行中断（最可能） #

updateState函数中，data.map或selectedRows.map的自定义逻辑如果抛出异常，会导致后续的setSelectedRows([])无法执行。比如处理逻辑中访问了不存在的属性、数组越界等，都会中断函数执行。

2. React状态更新的异步特性 #

setSelectedRows本身是异步操作，调用后不会立即修改当前作用域内的selectedRows变量，但这不会导致状态“不生效”——状态最终会在组件重渲染时更新。你感知到的“不生效”可能是在updateState中后续代码仍读取旧值，但这是正常的异步更新特性。

3. BTable状态同步问题 #

如果BTable内部维护了独立的选中状态缓存，或者selectedRows的引用传递出现问题（比如未使用新数组引用），可能导致useEffect未触发。但setSelectedRows([])会创建新的空数组引用，理论上应该触发监听。

解决方案 #

1. 排查代码异常 #

在updateState中添加错误捕获，定位是否有逻辑报错：

const updateState = (merge: String[]) => {
  try {
    let data = _.cloneDeep(merge)
    data.map(()=>{/* 自定义行处理逻辑 */})
    
    selectedRows.map((item) => {/* 自定义行处理逻辑 */})

    setTransferedRows(data)
    setSelectedRows([])
  } catch (e) {
    console.error('updateState执行出错:', e)
  }
 }

2. 验证状态是否实际更新 #

在数据中心组件中添加状态监听日志，确认selectedRows是否真的未更新：

useEffect(() => {
  console.log('selectedRows状态更新:', selectedRows)
}, [selectedRows])

如果日志能打印出空数组，说明状态已更新，问题出在BTable的响应逻辑；如果无日志输出，说明setSelectedRows([])未被执行。

3. 避免依赖旧状态值 #

updateState中selectedRows.map依赖的是旧状态值，可直接改用传入的merge参数（已包含最新的选中行数据）：

const updateState = (merge: String[]) => {
  let data = _.cloneDeep(merge)
  data.map(()=>{/* 自定义行处理逻辑 */})
  
  // 用merge替代selectedRows，避免读取旧状态
  merge.map((item) => {/* 自定义行处理逻辑 */})

  setTransferedRows(data)
  setSelectedRows([])
 }

4. 强制同步更新（仅排查用） #

如果需要强制立即触发重渲染，可使用React的flushSync（不推荐常规使用，仅用于验证）：

import { flushSync } from 'react-dom'

const updateState = (merge: String[]) => {
  let data = _.cloneDeep(merge)
  data.map(()=>{/* 自定义行处理逻辑 */})
  
  selectedRows.map((item) => {/* 自定义行处理逻辑 */})

  flushSync(() => {
    setTransferedRows(data)
    setSelectedRows([])
  })
 }

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