React Native TypeScript中如何将NetInfo连接状态用于if判断？

问题根源 #

你的代码问题核心是异步操作的执行时机：

• 第一个函数中，NetInfo.fetch()是异步任务，then回调里的赋值代码会在函数返回isConnected之后才执行，因此返回的是未赋值的初始值undefined。
• 第二个写法里，你赋值的是then方法返回的Promise对象，而非实际的连接状态值，所以日志显示的是Promise的内部结构。

可行解决方案 #

方案1：使用async/await（推荐，代码更易读） #

将函数声明为异步函数，通过await等待NetInfo.fetch()完成，直接获取状态值：

async function verifyConnection() {
  const state = await NetInfo.fetch();
  return state.isConnected;
}

// 调用示例
async function handleConnectionCheck() {
  const isConnected = await verifyConnection();
  if (isConnected) {
    console.log("网络已连接");
    // 执行联网相关逻辑
  } else {
    console.log("网络未连接");
    // 执行断网相关逻辑
  }
}

// 也可以直接在需要判断的地方简化写法
async function someBusinessLogic() {
  const isConnected = await NetInfo.fetch();
  if (isConnected) {
    // 这里写需要联网才能执行的代码
  }
}

方案2：在then回调内处理判断逻辑 #

如果不想使用async/await，直接把if判断放在then的回调函数中，确保在拿到异步结果后再执行判断：

function verifyConnection() {
  NetInfo.fetch().then((state) => {
    const isConnected = state.isConnected;
    if (isConnected) {
      console.log("网络已连接");
      // 处理联网场景的逻辑
    } else {
      console.log("网络未连接");
      // 处理断网场景的逻辑
    }
  });
}

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