useEffect仅首次渲染更新useState一次，页面刷新后数据为空如何解决

• 你的顶层console.log会在组件每次渲染时执行，首次渲染时异步请求还未返回，必然打印初始空数组。修改代码后热更新不会重置组件状态，所以能看到历史缓存的有效值，刷新后组件重新初始化，你看到的空数组大概率是首次渲染的初始值，并非请求更新后的值。
• 页面刷新后路由参数id可能存在短暂的空值/undefined状态，此时触发的useEffect会携带无效id发请求，要么接口报错无返回，要么返回空数据，后续id解析为有效值后如果没有重新触发请求，就会一直是空数组。
• 你没有给异步请求加错误捕获逻辑，刷新后可能因为鉴权信息丢失、跨域、接口路径错误等原因导致请求失败，不会执行setState逻辑，你也感知不到报错。

1. 给异步请求添加错误捕获，确认刷新后请求是否正常返回
2. 增加路由参数有效性校验，仅当id存在时才发起请求
3. 调整日志打印位置，避免把初始渲染的空值误认为请求后的结果

const [transaction, setTransaction] = useState([])
const [family_group, setFamily_group] = useState([])
const { id } = useParams();

useEffect(() => {
  // 仅当id有效时发请求
  if (!id) return
  getSingleTransaction()
}, [id])

const getSingleTransaction = async () => {
  try {
    const { data } = await axios.get(`/calc/trans/${id}`)
    // 这里打印确认接口返回值
    console.log('接口返回数据：', data)
    setTransaction(data)
    setFamily_group(data?.family_group || [])
  } catch (err) {
    // 刷新后如果请求报错这里会打印，可针对性排查接口问题
    console.error('请求失败：', err)
  }
}

// 监听state变化打印，确认setState是否执行
useEffect(() => {
  console.log(transaction, "isssssss")
  console.log(family_group, "igggg")
}, [transaction, family_group])

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