如何从渲染数据库结果的FlatList获取单条数据并解决首次取值为null问题

问题根因 #

• React 状态更新是异步执行的
  setDados 属于React的状态更新函数，调用后不会立即修改当前渲染周期内的dados值，而是会将更新任务加入队列，等待当前执行栈清空后才会触发重渲染，重渲染完成后才能拿到更新后的dados。你在调用setDados后立刻打印dados，拿到的始终是本次渲染的旧值：首次调用时dados初始值为null，所以打印null；第二次调用时拿到的是第一次更新后的值，所以看起来只有第二次生效。
• 数据筛选方法选用错误
  你用filter筛选数据，该方法返回的是符合条件的元素组成的数组，你需要获取单条用户对象，应该用find方法，直接返回第一个匹配的对象，更符合需求。

解决方案 #

根据你的使用场景，推荐两种修改方式：

方式1：不需要存状态，直接获取数据跳转（推荐） #

如果你的需求是点击编辑后直接跳转到更新页面，完全不需要把选中的数据存在状态里，直接拿到筛选结果后作为路由参数传递即可，规避异步更新问题：

function navigateEdit(selectedItem){ 
  // 用find获取单个匹配的用户对象
  const targetUser = data.find(item => item.no_completo === selectedItem)
  console.log('选中的用户数据', targetUser)
  // 直接通过路由传参跳转，替换成你实际的编辑页面路由名
  navigation.navigate('EditPage', { userInfo: targetUser })
}

方式2：需要将数据存在状态中后续使用 #

如果确实需要把选中的数据存在dados状态里，可以通过useEffect监听dados的变化，更新完成后再执行后续逻辑：

import { useEffect } from 'react'

// ...其余代码不变
const [dados, setDados] = useState(null)

function navigateEdit(selectedItem){ 
  const targetUser = data.find(item => item.no_completo === selectedItem)
  setDados(targetUser)
}

// 监听dados变化，更新后再执行操作
useEffect(() => {
  if(dados) {
    console.log('更新后的用户数据', dados)
    // 这里执行跳转或者其他逻辑
    navigation.navigate('EditPage', { userInfo: dados })
  }
}, [dados, navigation])

修改完成后首次点击就能正常拿到选中的用户数据。

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