React使用useState初始化空对象调用map报product未定义如何解决

问题根源 #

报错的本质是初始状态与预期数据结构不匹配：初始时product被设置为空对象，接口请求是异步操作，首次渲染时接口还没返回数据，product.size为undefined，调用undefined.map()就会抛出错误。你之前的空对象判断能解决报错，但直接返回null会让页面在请求过程中完全空白，用户体验较差。

推荐的规范解决方案 #

1. 替换初始状态的占位值

不要用空对象做初始值，改成null更直观，后续判断逻辑也更清晰：

// 把原来的 useState({}) 替换为
const [product, setProduct] = useState(null)

2. 新增加载、错误状态优化体验

新增状态管理请求的全流程，避免页面空白同时兼容异常场景：

const [product, setProduct] = useState(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)

useEffect(() => {
  let componentMounted = true
  const fetchProducts = async () => {
    try {
      const {data} = await axios.get(`http://172.30.246.130:5000/api/products/${match.params.id}`)
      if(componentMounted){
        setProduct(data)
        setLoading(false)
      }
    } catch (err) {
      if(componentMounted){
        setError(err.message || '商品数据请求失败')
        setLoading(false)
      }
    }
  }
  fetchProducts()
  return () => {
    componentMounted = false
  }
}, [match])

注意：你第二段代码里useEffect的依赖数组加了product会触发死循环，必须删掉，只保留match即可

3. 按场景分支渲染

按优先级分别处理不同状态的渲染逻辑，不需要用else包裹正常渲染代码：

// 加载中展示提示
if(loading) return <div>加载中...</div>
// 请求出错展示错误信息
if(error) return <div>出错了：{error}</div>
// 无商品数据兜底
if(!product) return <div>未找到对应商品</div>

// 直接写正常渲染逻辑即可
return (
  // 原有渲染代码
)

4. 可选链兜底异常数据

如果不确定后端返回的size字段一定是数组，可以用可选链+默认值做兜底，避免个别异常数据导致页面崩溃：

{product?.size?.map(s => <Button key={s} className='p-2 m-1'>{s}</Button>) || '暂无尺码可选'}

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