React中useEffect使用Redux状态传参axios报_id未定义如何解决

错误核心原因 #

1. 页面刷新时Redux的user状态还未完成初始化，user.userData为undefined，直接访问_id属性自然会抛出报错
2. 你的useEffect未添加依赖数组，会在每次组件渲染时重复执行，不仅存在性能问题，也会放大状态未就绪的报错概率
3. 额外隐藏问题：axios.get的第二个参数是配置对象，你直接传递userId对象，后端无法正确接收查询参数

解决方法 #

按照以下步骤修改代码即可：

• 使用可选链做属性访问兜底，避免层级属性不存在时报错
• 给useEffect添加依赖数组，将user状态加入依赖，user更新后会自动重新执行副作用
• 发起请求前先判断userId是否存在，存在才执行请求逻辑
• 修正axios传参格式，将查询参数放到params字段中

修正后代码示例 #

const user = useSelector(state => state.user)

useEffect(() => {
  // 可选链兜底获取userId，避免属性不存在报错
  const userId = user?.userData?._id
  // userId不存在直接终止逻辑，等Redux状态更新后再重新执行
  if (!userId) return

  axios.get('/api/blog/getBlogs', {
    params: { userId } // 修正axios传参格式
  })
  .then(response => {
    if(response.data.success){
      setBlogs(response.data.blogs)
    } else{
      alert("Couldn't get post list")
    }
  })
// 将user加入依赖数组，状态更新后自动触发副作用重新执行
}, [user])

如果还需要优化体验，可以新增loading状态，在userId未获取到的时候展示加载提示。同时建议给Redux的user reducer设置初始兜底值，避免初始状态完全为空：

// user reducer初始状态示例
const initialState = {
  userData: {}
}

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