React useEffect中setState后接口数据数组为空 页面无法渲染如何解决

问题原因 #

• React的setState是异步更新方法，调用setPersons后当前作用域内的persons还是本次渲染闭包绑定的旧值（初始为空数组），所以紧随其后的console.log(persons)必然打印空数组，这属于React的正常设计，不代表状态赋值失败。
• 你遇到的核心问题是：Mongoose默认返回的查询结果是Mongoose Document实例，不是普通JavaScript对象，这类实例的内置序列化逻辑会导致前端拿到的响应数据看似是正常字符串字段，实际是对象类型，React无法正常读取渲染对应字段，最终表现为状态看似为空、页面无内容。

修复方法 #

后端修复（推荐，你已验证可行的方案） #

在Mongoose的Schema定义中配置toJSON转换规则，将返回的Document实例统一转为纯JS对象，同时可以清理不需要的内置字段：

const personSchema = new mongoose.Schema({
  // 原有字段定义，如name、phone等
}, {
  toJSON: {
    transform(doc, ret) {
      // 把MongoDB默认的_id转成前端常用的id字段
      ret.id = ret._id.toString()
      // 删除不需要的内置字段
      delete ret._id
      delete ret.__v
    }
  }
})

配置后接口返回的数据就是标准纯JS对象，前端setPersons后可以正常读取字段渲染页面。

如果不想修改Schema，也可以在后端查询时直接调用.lean()方法，直接返回纯JS对象：

// 后端查询接口示例
Person.find().lean().then(persons => res.json(persons))

前端状态验证方法 #

如果需要确认状态是否更新成功，不要在setPersons后立刻打印，单独加一个监听persons变化的useEffect即可：

useEffect(() => {
  console.log('persons最新状态：', persons)
}, [persons])

页面渲染时直接遍历persons数组即可正常展示内容。

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