React中useEffect场景下无法获取JSON孙级属性值求助

问题场景 #

从本地JSON文件获取产品的孙级属性（img.thumbnail）时，其他页面功能正常，但在使用useEffect的组件中无法正常获取——能拿到子对象，却无法访问孙级属性，控制台会抛出属性访问错误。

核心原因 #

组件初始化时，Product的state是空对象{}，此时组件第一次渲染时useEffect还未执行，直接访问Product.img.thumbnail会因为Product.img为undefined而报错。直到useEffect执行完成、更新state后，组件重新渲染才能正确访问，但首次渲染的错误会导致功能异常。

解决方案 #

1. 优化state初始化 #

给Product的初始state添加img默认空对象，避免首次渲染时img为undefined：

const [Product, SetProduct] = useState({ img: {} });

2. 使用可选链操作符（?.） #

访问孙级属性时，用可选链操作符做安全判断，防止空值报错：

console.log(Product.img?.thumbnail)

3. 优化产品查找逻辑 #

用find替代forEach，找到匹配项后直接返回，性能更优：

useEffect(() => {
    const matchedItem = GetProduct.find(element => element.id === ProductId);
    if (matchedItem) {
        SetProduct(matchedItem);
    }
}, [GetProduct, ProductId])

修改后的完整代码 #

import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom';

const ProductDetails = (props) => {
    // 初始化时给img默认空对象，避免首次渲染报错
    const [Product, SetProduct] = useState({ img: {} });
    const { ProductId } = useParams();
    const GetProduct = props.ProductData.products;

    useEffect(() => {
        // 用find高效查找匹配的产品
        const matchedItem = GetProduct.find(element => element.id === ProductId);
        if (matchedItem) {
            SetProduct(matchedItem);
        }
    }, [GetProduct, ProductId])

    // 安全访问孙级属性
    console.log(Product.img?.thumbnail)
    
    // 渲染时也建议用可选链做安全判断
    return (
        <div>
            {Product.img?.thumbnail && <img src={Product.img.thumbnail} alt="产品缩略图" />}
        </div>
    )
}

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