如何在完成指定操作后再渲染React组件 解决JSON属性读取报错

报错根源 #

报错并非来自for循环执行耗时，而是组件首次渲染时，distroFeature状态初始值为null/undefined，此时useEffect内的赋值逻辑还未执行，直接访问.Origin属性触发空指针异常。本地导入的JSON是同步加载的，不需要使用fetch异步请求。

实现代码 #

最简修复方案 #

import { DistroList as distroList } from '../backend/distroList.json'
import { useState, useEffect } from 'react'

export default function YourComponent({ distroName }) {
  // 初始值设为空对象避免空指针，也可保留null后续做条件渲染
  const [distroFeature, setDistroFeature] = useState({})

  useEffect(() => {
    // 用find方法替代for-in循环，代码更简洁
    const targetDistro = Object.values(distroList).find(item => item.Name === distroName)
    targetDistro && setDistroFeature(targetDistro)
  // 补全依赖项，避免闭包问题
  }, [distroName, distroList])

  return (
    <div>
      {/* 可选链+兜底文本避免空值报错 */}
      <h1>{distroFeature?.Origin ?? '加载中'}</h1>
    </div>
  )
}

进阶优化（无需useEffect） #

如果distroName不会动态变化，可直接在状态初始化时完成匹配，首次渲染就有值，完全规避空值问题：

import { DistroList as distroList } from '../backend/distroList.json'
import { useState } from 'react'

export default function YourComponent({ distroName }) {
  const [distroFeature] = useState(() => {
    return Object.values(distroList).find(item => item.Name === distroName) || {}
  })

  return (
    <div>
      <h1>{distroFeature.Origin}</h1>
    </div>
  )
}

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