Expo应用刷新后组件与数据消失，热更新后恢复问题求助

问题描述 #

• Expo应用页面刷新后组件及数据消失，修改任意代码（如添加分号）保存后数据重新显示，再次刷新又消失
• 核心逻辑是合并getSign与getLine的数据生成Final，刷新后Final返回空数组，代码修改后能返回正确数据
• 尝试过同类问题的Stack Overflow解法，无效

问题原因 #

原代码的核心问题是异步操作顺序错误：
getSign和getLine是异步获取数据并更新state的操作，但你在调用它们后立刻执行getFinal合并数据。此时Sign和Linedata还处于初始空数组状态，合并结果自然为空。而代码修改后的热重载会保留之前的state缓存，所以能正确合并数据。

解决方案 #

方案一：等待异步请求完成后再合并

修改getSign和getLine使其返回Promise，确保数据请求完成后再执行合并：

const [Final, setFinal] = useState([]);
const [Sign, setSign] = useState([]);
const [Linedata, SetLinedata] = useState([]);      

// 让getSign返回Promise，完成数据请求并更新state后返回数据
const getSign = async () => {
  const signData = await yourSignDataFetch(); // 替换为你的实际数据请求逻辑
  setSign(signData);
  return signData;
};

// 同理修改getLine
const getLine = async () => {
  const lineData = await yourLineDataFetch(); // 替换为你的实际数据请求逻辑
  SetLinedata(lineData);
  return lineData;
};

useEffect(() => {
  (async () => {
    // 等待两个请求都完成
    await Promise.all([getSign(), getLine()]);
    // 此时Sign和Linedata已更新，执行合并
    const mergedData = Sign.map(item => ({
      ...item,
      Line: Linedata[item['sign']]
    }));
    setFinal(mergedData);
  })();
}, []);

方案二：监听state变化自动合并

通过监听Sign和Linedata的状态，当两者都有数据时自动执行合并：

const [Final, setFinal] = useState([]);
const [Sign, setSign] = useState([]);
const [Linedata, SetLinedata] = useState([]);      

// 初始加载时触发数据请求
useEffect(() => {
  getSign();
  getLine();
}, []);

// 监听Sign和Linedata的变化，仅当两者非空时合并
useEffect(() => {
  if (Sign.length && Linedata.length) {
    const mergedData = Sign.map(item => ({
      ...item,
      Line: Linedata[item['sign']]
    }));
    setFinal(mergedData);
  }
}, [Sign, Linedata]);

// 你的异步数据请求函数示例
const getSign = async () => {
  const res = await fetch('你的签名数据接口');
  const data = await res.json();
  setSign(data);
};

const getLine = async () => {
  const res = await fetch('你的线路数据接口');
  const data = await res.json();
  SetLinedata(data);
};

关键说明 #

• React的state更新是异步的，不能在调用state更新函数后立刻依赖新的state值
• 页面刷新时所有state会重置为初始值，而热重载会保留当前state，这就是两种场景结果不同的原因

内容的提问来源于stack exchange，提问作者Eric.P