React Native中setPackages首次调用不生效，需刷新应用后方可正常运行

这种情况我之前在集成第三方SDK时也碰到过，结合你的代码和现象来看，大概率是React状态更新的引用检测机制或者Purchases SDK的初始化细节导致的，咱们一步步排查解决：

可能的原因分析 #

1. React无法检测到状态引用变化
   React的状态更新依赖于值的引用变化，如果offerings.current.availablePackages是SDK返回的缓存对象/数组（引用未改变），即使内容更新了，React也会认为状态没有变化，不会触发组件重新渲染。而你保存代码刷新后，SDK可能重新生成了这个数组的引用，这时候setPackages就能正常触发更新。

2. Purchases.setup的异步初始化未被等待
   虽然Purchases.setup()看起来是同步调用，但很多第三方SDK的初始化是异步完成的。第一次调用getOfferings时，SDK可能还没完全初始化完成，虽然能拿到数据，但数据的内部结构可能存在异常，导致状态更新失效。

解决方案 #

方案1：强制创建新的数组引用 #

通过解构或深拷贝的方式，为availablePackages创建一个新的引用，确保React能检测到状态变化：

const [packages, setPackages] = useState([]);
useEffect(() => {
  const getPackages = async () => {
    Purchases.setDebugLogsEnabled(true);
    Purchases.setup("MY_KEY_HERE");
    try {
      const offerings = await Purchases.getOfferings();
      if (offerings.current !== null) {
        console.log(offerings.current.availablePackages);
        // 用解构创建新数组，强制更新引用
        const updatedPackages = [...offerings.current.availablePackages];
        setPackages(updatedPackages);
      } else {
        console.log("No offerings found");
      }
    } catch (e) {
      console.log("Error => " + e);
    }
  }
  getPackages();
},[])

如果availablePackages是嵌套对象结构，建议用深拷贝（比如JSON.parse(JSON.stringify())）来确保所有层级的引用都更新。

方案2：确保SDK初始化完成后再请求数据 #

检查Purchases SDK的文档，确认setup是否返回Promise或提供初始化完成的回调。如果是异步初始化，需要等待完成后再调用getOfferings：

// 假设setup返回Promise
const getPackages = async () => {
  Purchases.setDebugLogsEnabled(true);
  // 等待setup完成
  await Purchases.setup("MY_KEY_HERE");
  try {
    const offerings = await Purchases.getOfferings();
    // ... 后续逻辑
  } catch (e) {
    console.log("Error => " + e);
  }
}

方案3：检查组件的渲染优化 #

如果你的组件使用了React.memo或自定义的shouldComponentUpdate，可能会阻止状态更新后的重新渲染。可以暂时移除这些优化，测试是否能正常更新状态。

验证步骤 #

1. 先尝试方案1，修改setPackages的参数为新引用，看首次加载是否生效；
2. 如果无效，再检查SDK初始化的异步性，尝试方案2；
3. 最后排查组件是否有渲染拦截的逻辑。

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