React报错product.color is undefined 可打印数组但map时异常

报错本质是React首次渲染阶段product.color确实为undefined，控制台能打印出颜色数组是浏览器开发者工具对引用类型的懒求值特性造成的错觉：

• useState初始化product为空对象{}时，首次渲染阶段product对象上根本不存在color字段，此时直接对color调用map、访问length属性必然抛出类型错误
• useEffect的执行时机是组件首次渲染完成之后，也就是说axios请求、setProduct更新状态的逻辑，都晚于首次渲染时页面代码的执行时机
• 控制台打印对象、数组这类引用类型值时，不会立刻定格打印时刻的数值，等你手动在控制台展开打印结果时，组件状态已经被接口返回的数据更新完成，所以你能看到Array ["red"]这个后续才赋值的结果，这不能代表报错代码执行的那一刻color是有值的。

按使用便捷度排序，选一种即可：

• 初始化状态时提前给color字段设默认空数组，从根源杜绝undefined

const [product, setProduct] = useState({
  color: [], // 其他字段也可以按需补充对应默认值
})

• 用可选链+空值合并做兜底，无需修改初始值

// 遍历渲染时加可选链，color不存在时不会执行map逻辑
{product.color?.map(color => (
  <div key={color} className="color-item">{color}</div>
))}

// 访问length属性时兜底为0
const colorTotal = product.color?.length ?? 0

• 加条件判断，等color字段存在后再渲染对应模块，可搭配loading状态优化交互体验

{product.color ? (
  <div className="color-filter">
    {product.color.map(color => <span key={color}>{color}</span>)}
  </div>
) : <div className="loading">颜色信息加载中</div>}

后续再遇到类似“打印有值但访问属性报错”的问题，打印时做一次深拷贝拿到执行时刻的数值快照，就能看到真实的运行时值：
console.log(JSON.parse(JSON.stringify(product)))
用这个方式打印就能看到，首次渲染时product确实是空对象，color字段为undefined。

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