React Native状态已渲染但使用时为空的问题排查

核心问题：闭包捕获旧State + useState异步更新 #

你在fetchData里直接用vintedItems.concat(itemsToSend)时，因fetch是异步操作，setVintedItems执行时拿到的vintedItems是组件初始渲染的旧值（空数组），而非最新state。这是React函数组件中闭包捕获state的特性导致——异步操作会保留当前渲染周期的state值。

具体修复步骤 #

1. 改用函数式更新state #

更新setVintedItems时，通过函数式写法获取最新state，确保拼接基于最新数据：

// 新数据拼到旧数据顶部，用展开运算符更直观
setVintedItems(prevItems => [...itemsToSend, ...prevItems])

2. 修正setIsFirstSync的位置 #

原代码把setIsFirstSync(false)放在fetch外部，会导致首次请求未完成就修改状态，破坏首次同步逻辑。移到then回调内：

.then(function (data) {
  // ... 原有逻辑
  if(items.length) {
    // ... 原有逻辑
    setIsFirstSync(false) // 确保首次请求完成后再更新状态
  }
})

3. 避免reverse()修改原数组 #

items.reverse()会直接修改原数组，产生不必要的副作用，先复制数组再反转：

const itemsToSend = lastItemTimestamp && !isFirstSync ? [...items].reverse() : [items[0]];

4. 修正newLastItemDate的判断逻辑 #

newLastItemDate是数字类型的时间戳，不存在length属性，无效判断直接移除：

if(!lastItemTimestamp || newLastItemDate > lastItemTimestamp) {
  setLastItem(newLastItemDate)
}

5. 可选：优化lastItem初始值 #

将lastItem初始值设为0，简化后续条件判断：

const [lastItem, setLastItem] = useState(0)

修复后的完整fetchData代码 #

const fetchData = (params) => {
  fetch('your-api-url')
    .then(response => response.json())
    .then(data => {
      const lastItemTimestamp = lastItem 
   
      const items = data.items
        .sort((a, b) => b.photo.high_resolution.timestamp - a.photo.high_resolution.timestamp)
        .filter(item => item.photo.high_resolution.timestamp > lastItemTimestamp);

      if(items.length) {
        const newLastItemDate = items[0].photo.high_resolution.timestamp
        if(newLastItemDate > lastItemTimestamp) {
          setLastItem(newLastItemDate)
        }
 
        const itemsToSend = lastItemTimestamp && !isFirstSync ? [...items].reverse() : [items[0]];
        setVintedItems(prevItems => [...itemsToSend, ...prevItems])
        setIsFirstSync(false)
      }
    })
    .catch(error => {
      console.log(error)
    })
}

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