React调用API商品列表渲染正常 单个商品页无内容问题求助

问题根因 #

• 单个商品接口返回的是对象类型，但你在ProductScreen中给product状态设置的初始值是空数组[]，初始渲染阶段读取数组上不存在的image、name、price等属性时会触发JS报错，直接阻止了页面正常渲染。
• 即使接口请求成功后更新了状态，之前的渲染报错也会导致内容无法正常展示。

修复方案 #

1. 修正product状态的初始值，改为空对象{}或者null
2. 给所有访问product属性的位置添加可选链运算符?.，或者新增加载状态判断，避免初始渲染阶段的属性读取报错

修复后的ProductScreen代码示例： #

import React, { useState, useEffect } from 'react'
import { Link, useParams } from 'react-router-dom'
import {
    Row,
    Col,
    Image,
    ListGroup,
    ListGroupItem,
    Button
} from 'react-bootstrap'
import axios from 'axios'

const ProductScreen = () => {
    // 初始值从空数组改为空对象
    const [product, setProduct] = useState({})
    const { id } = useParams()

    useEffect(() => {
        const fetchProduct = async () => {
            const { data } = await axios.get(`/api/products/${id}`)
            setProduct(data)
        }
        fetchProduct()
    }, [id])

    return (
        <>
            <Link className="btn btn-light my-3" to="/">
                返回
            </Link>

            <Row>
                <Col md={4}>
                    <div>
                        {/* 加可选链防止属性读取报错 */}
                        <Image src={product?.image} alt={product?.name} fluid rounded />
                    </div>
                </Col>
                <Col md={3}>
                    <ListGroup>
                        <ListGroupItem>
                            <h4>{product?.name}</h4>
                            <h5>${product?.price}</h5>
                        </ListGroupItem>
                        <ListGroupItem>{product?.description}</ListGroupItem>
                        <ListGroupItem>
                            {product?.inStock > 0 ? '有货' : '无货'}
                        </ListGroupItem>
                        <ListGroupItem>
                            <Button
                                className="btn-block"
                                type="button"
                                disabled={product?.inStock === 0}
                            >
                                加入购物车
                            </Button>
                        </ListGroupItem>
                    </ListGroup>
                </Col>
            </Row>
        </>
    )
}

export default ProductScreen

如果需要更友好的用户体验，可以新增加载状态，接口请求完成前展示加载提示：

const ProductScreen = () => {
    const [product, setProduct] = useState(null)
    const [loading, setLoading] = useState(true)
    const { id } = useParams()

    useEffect(() => {
        const fetchProduct = async () => {
            setLoading(true)
            const { data } = await axios.get(`/api/products/${id}`)
            setProduct(data)
            setLoading(false)
        }
        fetchProduct()
    }, [id])

    if(loading) return <div>加载中...</div>

    // 后续渲染逻辑和上面一致即可
}

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