React Native中JavaScript数组异常：useEffect内外数组长度为何不一致？

问题原因分析 #

1. React状态更新的异步性

setToReadurl不会立刻修改toReadurl的状态值，组件需要完成重新渲染才能拿到最新状态。你在组件顶层的console.log(toReadurl)会在每次渲染时执行，而四个getDownloadURL是异步请求，它们的回调不会同时完成——可能前两个请求先结束，触发两次状态更新，此时你看到的是前两次更新后的结果（2个元素），后续两个请求完成后状态会更新到4个元素，只是你可能没留意到后续的打印输出。

2. 闭包陷阱+错误的状态更新逻辑

你定义的let allurl = []在组件每次渲染时都会重新创建一个空数组。而useEffect只在组件挂载时执行一次，里面的异步回调捕获的是第一次渲染时的allurl。当四个异步回调依次执行时，它们都会往同一个旧数组里push值，但前两次push后调用setToReadurl(allurl)会触发组件重新渲染，新渲染里的allurl又会被初始化为空数组，可旧回调还在使用第一次的allurl。这种直接修改数组再set的方式，很容易导致状态和实际数据不一致。

正确保存链接的两种方案 #

方案1：使用函数式更新状态

抛弃allurl变量，每次更新都基于最新的状态值操作：

const [toReadurl, setToReadurl] = useState([])
useEffect(() => {
  const listRef = sRef(storage, paramKey)
  listAll(listRef)
    .then((res) => {
      res.items.forEach((itemRef) => {
        getDownloadURL(itemRef).then((url) => {
          // 函数式更新，确保基于最新state添加元素
          setToReadurl(prevUrls => [...prevUrls, url])
        })
      })
    }).catch((error) => {
      console.log(error)
    });
}, [])

这种方式每次添加新链接时，都会拿到当前最新的toReadurl数组，不会出现数据丢失。

方案2：用Promise.all批量获取后更新

如果不需要逐个加载链接，而是等所有链接都获取到后再渲染，这种方式更高效（仅触发一次组件渲染）：

const [toReadurl, setToReadurl] = useState([])
useEffect(() => {
  const listRef = sRef(storage, paramKey)
  listAll(listRef)
    .then((res) => {
      // 将所有请求转为Promise数组
      const urlPromises = res.items.map(itemRef => getDownloadURL(itemRef))
      // 等待所有请求完成
      return Promise.all(urlPromises)
    })
    .then((urls) => {
      // 一次性设置所有链接
      setToReadurl(urls)
    })
    .catch((error) => {
      console.log(error)
    });
}, [])

内容的提问来源于stack exchange，提问作者L.Calvin