React+Express项目中JS变量异步查询后无法外部更新的问题

这不是作用域问题，而是异步代码执行顺序导致的。db.query是异步操作，它的回调函数会在数据库查询完成后才触发，但主线程不会等待异步操作完成，会直接执行后续代码。所以外部的console.log(maxPlayers)会先于回调里的赋值语句执行，此时maxPlayers还是初始值0。

解决方案1：将依赖逻辑放入回调内部 #

如果后续代码需要用到更新后的maxPlayers，直接把逻辑写在回调函数里：

let maxPlayers = 0;

db.query("SELECT * FROM cards", (err, rows) => {
  if (err) {
    // 务必处理查询错误
    console.error(err);
    return;
  }
  maxPlayers = rows.length;
  console.log(maxPlayers); // -> 30
  // 所有依赖maxPlayers的逻辑都写在这里
  initGame(maxPlayers); // 示例：调用游戏初始化函数
});

解决方案2：用Promise封装+async/await #

如果不想嵌套回调，可以把db.query封装为Promise，再用async/await让代码逻辑更接近同步写法：

// 封装db.query为Promise
const queryWithPromise = (sql) => {
  return new Promise((resolve, reject) => {
    db.query(sql, (err, rows) => {
      if (err) reject(err);
      else resolve(rows);
    });
  });
};

// 用async函数执行查询
async function fetchMaxPlayers() {
  let maxPlayers = 0;
  try {
    const rows = await queryWithPromise("SELECT * FROM cards");
    maxPlayers = rows.length;
    console.log(maxPlayers); // -> 30
    // 后续逻辑写在这里
  } catch (err) {
    console.error(err);
  }
}

fetchMaxPlayers();

关键提醒 #

异步操作的结果只能在回调触发后或await之后获取，不要试图在异步操作外部直接同步获取异步结果；另外永远不要忽略数据库查询的错误处理，避免程序异常崩溃。

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