React Native中useRef异步内正常工作但外部失效问题求助

问题根源 #

1. useState更新的异步性：调用setProcessedData后，React不会立刻更新processedData状态，所以紧接着的console.log拿不到新值。
2. 闭包捕获旧值：useRef里的函数是在组件首次渲染时创建的，它捕获的是当时的processedData（空数组），后续状态更新不会改变这个闭包里的变量引用，所以无论状态怎么变，这里打印的都是初始的空数组。

解决方案 #

方案1：直接使用requestDb返回的处理后数据

既然requestDb已经返回了处理好的数据，调用时直接通过Promise获取结果，无需依赖状态：

const onViewableItemsChanged = useRef(({ viewableItems }: any) => {
  if (viewableItems.length > 0) {
    requestDb(viewableItems.map((item: any) => item.item))
      .then(updatedData => {
        console.log(updatedData); // 这里能拿到最新处理后的数据
        // 直接用updatedData做你需要的操作
      });
  }
}).current;

方案2：用useEffect监听状态变化

如果需要在processedData更新后执行操作，用useEffect监听状态：

// 新增useEffect
useEffect(() => {
  if (processedData.length > 0) {
    console.log(processedData);
    // 在这里执行需要用到processedData的逻辑
  }
}, [processedData]); // 依赖项设为processedData，状态更新时触发

// 原onViewableItemsChanged保持不变
const onViewableItemsChanged = useRef(({ viewableItems }: any) => {
  if (viewableItems.length > 0) {
    requestDb(viewableItems.map((item: any) => item.item));
  }
}).current;

方案3：让useRef里的函数捕获最新状态

用useCallback包裹回调函数，确保每次processedData更新时，函数能捕获最新值，再同步到useRef：

// 用useCallback创建依赖processedData的回调
const handleViewableChange = useCallback(({ viewableItems }: any) => {
  if (viewableItems.length > 0) {
    requestDb(viewableItems.map((item: any) => item.item));
    console.log(processedData); // 这里能拿到最新状态
  }
}, [processedData]);

// 用useRef保存最新的回调引用
const onViewableItemsChanged = useRef(handleViewableChange);

// 每次handleViewableChange更新时，同步到ref
useEffect(() => {
  onViewableItemsChanged.current = handleViewableChange;
}, [handleViewableChange]);

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