React Native屏幕聚焦时如何正确更新状态变量？

问题背景 #

在React Native项目中，存在一个状态变量需要在特定函数调用时更新，但由于setState的异步特性，变量更新时机滞后，导致组件渲染不符合预期。

预期效果 #

• 屏幕初始化时，该变量为空数组；
• 屏幕聚焦时填充数组，并根据数组内容渲染组件。

实际问题 #

• 屏幕初始化时变量为空数组；
• 屏幕聚焦时调用setState尝试填充数组；
• 渲染组件时数组仍为空，无内容显示；
• 页面渲染完成后数组才被填充。

相关代码示例 #

父组件代码 #

const MyComponent: FC<MyComponentProps> = ({/* 组件props */}) => {
  const [rows, setRows] = useState<Array<boolean>>([]);

  useEffect(() => {
    console.log('rows on useEffect: ', rows);
  }, [rows]);

  async function OnFocus(): Promise<void> {
    await GetApplication();
  }

  async function GetApplication(): Promise<void> {
      const _state: ApplicationParameters = await ctrl.getApplicationParameters(
        ctrl.ctrl.getDevice()
      );
      
      console.log('_state.rows: ', _state.rows);
      console.log('rows before setRows()', rows);
      setRows(_state.rows!);
      console.log('rows after setRows()', rows);
    }

    return(
        <RowBars theme={theme} rows={rows} />
    )
}

子组件代码 #

interface RowBarsProps {
  theme: AppColors;
  rows: Array<boolean>;
}

export const RowBars: FC<RowBarsProps> = ({ theme, rows }: RowBarsProps) => {
  const [Rows] = useState<number>(rows.length);

  const _rows = [];
  for (let i = 0; i < Rows; i++) {
    _rows.push(<RowBar theme={theme} isOn={rows[i]} />);
  }

  return <RowToRowLiteBars>{_rows}</RowToRowLiteBars>;
};

日志输出 #

LOG  _state.rows:  [true, true, true, true, true, true, true, true, true, true, true]
LOG  rows before setRows() []
LOG  rows after setRows() []
LOG  rows on useEffect() [true, true, true, true, true, true, true, true, true, true, true]
LOG  rows on useEffect() [true, true, true, true, true, true, true, true, true, true, true]

已尝试方案 #

• 在useEffect中更新rows，但找不到可靠的依赖变量；
• 通过继承的props变量初始化rows，但rows更新时props尚未更新，导致取值未定义。

解决方案 #

核心问题定位 #

问题根源有两点：

1. React的setState是异步操作，调用setRows后不会立即更新rows状态，后续打印旧值属于正常特性；
2. 子组件RowBars中用useState存储rows.length，仅在组件首次挂载时初始化一次，后续rows props更新时，该状态不会同步更新，导致循环次数始终为初始的0，无法渲染子元素。

修复步骤 #

1. 移除子组件中不必要的useState

直接使用props中的rows.length作为循环条件，保证每次渲染都取最新值：

interface RowBarsProps {
  theme: AppColors;
  rows: Array<boolean>;
}

export const RowBars: FC<RowBarsProps> = ({ theme, rows }: RowBarsProps) => {
  const _rows = [];
  // 直接使用rows.length，props更新时自动重新计算
  for (let i = 0; i < rows.length; i++) {
    _rows.push(<RowBar theme={theme} isOn={rows[i]} />);
  }

  return <RowToRowLiteBars>{_rows}</RowToRowLiteBars>;
};

2. 确保屏幕聚焦事件正确绑定（可选）

如果OnFocus未正确绑定到屏幕聚焦事件，补充如下代码（需依赖@react-navigation/native）：

import { useFocusEffect } from '@react-navigation/native';

const MyComponent: FC<MyComponentProps> = ({/* 组件props */}) => {
  const [rows, setRows] = useState<Array<boolean>>([]);

  useEffect(() => {
    console.log('rows on useEffect: ', rows);
  }, [rows]);

  async function GetApplication(): Promise<void> {
      const _state: ApplicationParameters = await ctrl.getApplicationParameters(
        ctrl.ctrl.getDevice()
      );
      setRows(_state.rows!);
    }

  // 使用useFocusEffect绑定屏幕聚焦触发逻辑
  useFocusEffect(
    React.useCallback(() => {
      GetApplication();
    }, [])
  );

  return(
      <RowBars theme={theme} rows={rows} />
  )
}

原理说明 #

• React状态更新采用异步批量处理机制，调用setState后无法立即获取新状态，这是设计特性，无需强行同步；
• 子组件中用useState存储rows.length会切断与props的响应式关联，直接使用props值可保证每次渲染都基于最新数据生成UI。

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