React Native中无法在箭头函数外部访问变量问题排查

这是JavaScript异步执行机制导致的，你调用的Firebase Realtime Database的dbRef.on("value")是异步事件监听方法，注册的箭头回调函数不会同步执行，需要等待数据库端返回数据后才会被触发执行。

你的代码实际执行顺序如下：

• 第一步：执行var listings = [];，初始化空数组
• 第二步：执行dbRef.on("value", 回调函数)，仅完成回调函数的注册，主线程不会等待异步请求返回，直接向下执行后续代码
• 第三步：执行箭头函数外的console.log('listing',listings);，此时数据库还没有返回数据，回调函数还没被触发，数组没有被写入值，所以打印结果为空
• 第四步：等到数据库返回响应数据后，注册的箭头回调才会被执行，遍历快照数据往listings数组中推入值，此时在回调内部访问数组才能拿到有效值

注意：这不是作用域问题，你内外访问的是同一个listings数组，只是外部打印的时机早于数组被赋值的时机，才会出现空数组的情况。

解决建议 #

你可以选择两种常用方案处理：

1. 把所有需要用到listings数据的业务逻辑，全部放到dbRef.on("value")的回调函数内部执行
2. 如果只需要单次获取数据，使用once方法配合async/await控制执行流程，示例代码如下：

async function fetchListings() {
  const snapshot = await dbRef.once("value");
  const listings = [];
  snapshot.forEach((listing) => {
    listings.push(listing.val());
  });
  // 后续处理listings的逻辑
  console.log('listings', listings);
}
fetchListings();

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