Next.js动态页访问Redux中poData的refId属性报错undefined如何解决

问题根因 #

• Redux中po切片的初始值是空数组，组件首次渲染时如果还未执行addPO动作注入数据，state.po.find(xxx)会直接返回undefined，此时直接访问poData.refId自然会抛出「无法读取undefined的refId属性」的错误。
• 控制台打印poData能看到完整对象是浏览器的控制台特性：打印对象时存储的是引用，你手动点开查看对象内容时，Redux已经完成了数据注入，所以能看到完整的属性值，这不代表首次渲染执行console.log这行代码时poData就已经有值。

解决方案 #

方案1：添加防御性判断（最快捷） #

用可选链运算符、条件渲染处理空值情况，还可以补充加载态优化体验：

/* Page Component Function */
export default function POdetail(props) {
  const poData = useSelector(state => state.po.find(item => item.refId === props.pid))

  // 数据未加载完成时显示加载提示
  if(!poData) return <div>加载中...</div>

  return (
    <>
      <h1>{poData.refId} </h1>
    </>
  )
}

如果不想写加载判断，也可以直接用可选链访问属性：

<h1>{poData?.refId} </h1>

方案2：静态生成阶段就注入数据（更符合Next.js最佳实践） #

你当前的getStaticProps只返回了pid，可以直接在这个阶段查询本地的purchaseOrdersDb拿到对应PO数据，直接作为props传给组件，就不用依赖客户端Redux的状态，也不会出现空值问题：

export async function getStaticProps(context) {
  const pid = context.params.refId;
  // 直接在服务端查对应PO数据
  const poData = purchaseOrdersDb.find(item => item.refId === pid)
  return {
    props: {
      pid,
      poData
    }
  }
}

之后组件直接用props里的poData即可，不需要再从Redux取数。

内容的提问来源于stack exchange，提问作者M Shahzeb Raza