Typescript 如何在Reaction Native中关注屏幕时正确更新状态变量

我的Reaction Native项目中有一个状态变量.它需要在调用特定函数时进行更新.然而，setState方法是异步的，这会导致我的变量在应该更新之后进行更新.

我需要做的是:

• 屏幕以所述变量作为空数组开始；
• 当屏幕被聚焦时，填充数组，并根据数组在屏幕上创建组件；

正在发生的情况是:

• 屏幕以所述变量作为空数组开始；
• 当屏幕被聚焦时，我try 用setState填充数组；
• 在try 创建组件时，由于数组为空，因此什么也不会发生；
• 在生成页面后填充array.

为了说明这是如何管理的，下面是我的代码:

const MyComponent: FC<MyComponentProps> = ({/*my component 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} />
    )
}
 

上述代码的日志(log)显示:

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]

如果有什么触发了状态更新，数组将显示为已填充，但不会生成任何内容.

稍后使用我的变量的组件如下所示:

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>;
};

我试过:

• 更新rows在useEffect.然而，我没有一个可靠的变量来监视useEffect的依赖数组;
• 从继承的props变量初始化行.然而，因为当rows被更新时，props变量还没有被更新，它试图从一个未定义的值设置rows.