React函数组件访问categories属性报category未定义如何解决

报错和categories数组包含3个对象没有任何关系，是两个访问逻辑错误导致的：

• 初始状态设置不合理：你给car设置的初始值是空数组[]，组件首次渲染时接口请求还未返回，此时car是空数组，本身不存在categories属性。之前model、maker、released字段没报错，是因为空数组访问这些属性返回undefined，React可以正常渲染undefined为空白，不会抛错；但如果对undefined继续向下访问子属性，就会直接触发“属性未定义”的运行时错误。
• 数据类型访问错误：categories是对象数组，不是单个对象，你不能直接在数组类型的值上访问.category属性——数组本身没有这个自定义属性，car.categories.category拿到的是undefined，再访问.name自然会报'category'未定义。

做两处调整即可：

1. 把car的初始值从空数组改为null，数据加载完成前先展示加载提示，同时搭配可选链?.做属性安全访问，彻底避免渲染时序导致的报错。
2. 数组类型数据必须通过索引访问单个元素，要展示所有分类名的话直接遍历数组即可，不要直接在数组上点自定义属性。

修正后的可运行代码：

const CarDetails = () => {
    const {carsId} = useParams();
    // car是单个对象，初始值设为null
    const [car, setCar] = useState(null)

    const loadCar = () => {
        getOneCar(carsId)
            .then(data => {
                setCar(data)
            })
    }

    useEffect(() => {
        loadCar()
    }, [carsId]); // 把carsId加入依赖，路由参数变化时重新拉取数据

    // 数据未就绪时展示加载态
    if (!car) return <p>加载中...</p>

    return (
        <>
        <h2>{car.model}</h2>
        <p>Maker: {car.maker}</p>
        <p>Year released: {car.released}</p>
        <p>Categories: 
            {car.categories?.map((item, index) => (
                <span key={item.id}>
                    {item.category.name}
                    {index < car.categories.length - 1 ? '、' : ''}
                </span>
            ))}
        </p>
        </>
    )
}

如果你不需要展示所有分类，只想取第一个分类的名称，直接通过索引访问即可：car.categories?.[0]?.category.name，不要漏写数组索引。

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