React组件报错TypeError: Cannot read properties of null (reading 'id')原因及解决

问题代码 #

import {InputText} from 'primereact/inputtext'

const Show = ({id}) => {
  const [item, setItem] = useState(null)

  useEffect(() => {
    itemService
      .getItem(id)
      .then((data) => {
        setItem(data)
        console.log(data)
      })
  }, [])

  return (
    <InputText id='firstname' type='text' value={item.id} />
  )
}

报错信息 #

Server Error TypeError: Cannot read properties of null (reading 'id')

现象 #

移除value={item.id}后错误消失，控制台显示itemService已成功获取到数据：

{
  "id": 1,
  "createdAt": "2023-05-15T16:44:30.808+00:00",
  "enabled": true
}

原因分析 #

1. 组件渲染时机问题：React组件初始化时，item的初始值是null，此时会立即执行return中的渲染逻辑，直接访问item.id自然触发空值报错。
2. useEffect执行时机：useEffect在组件首次渲染完成后才会执行，数据请求和状态更新发生在第一次渲染之后，所以第一次渲染时item仍是初始的null。
3. 依赖数组遗漏：当前useEffect的依赖数组为空，若props中的id变化，组件不会重新发起请求获取新数据，属于潜在逻辑漏洞。

解决方法 #

方法1：使用可选链操作符（推荐）

通过可选链?.避免空值访问，当item为null时表达式返回undefined，不会触发报错：

return (
  <InputText id='firstname' type='text' value={item?.id} />
)

方法2：设置初始默认值

给item设置包含id属性的初始值，确保渲染时不会访问空值：

const [item, setItem] = useState({ id: '' })

方法3：添加加载状态判断

在数据未返回时显示加载提示，避免渲染依赖item的组件：

const Show = ({id}) => {
  const [item, setItem] = useState(null)

  useEffect(() => {
    itemService
      .getItem(id)
      .then((data) => setItem(data))
  }, [id]) // 补充id到依赖数组

  if (!item) {
    return <div>加载中...</div>
  }

  return (
    <InputText id='firstname' type='text' value={item.id} />
  )
}

方法4：补充useEffect依赖数组

将id添加到useEffect的依赖数组中，确保id变化时重新请求数据：

useEffect(() => {
  itemService
    .getItem(id)
    .then((data) => setItem(data))
}, [id]) // 依赖数组加入id

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