React项目中价格字段先显示NaN后出现正常数值，该如何修复？

问题原因 #

• 初始Product状态为空对象，组件首次渲染时传递给子组件的detail.price为undefined，parseInt(undefined, 10)会返回NaN，因此首次渲染会显示错误值。
• axios请求是异步操作，只有等请求完成更新Product状态后，组件二次渲染才能拿到正确的价格数据，因此会出现先显示NaN再跳转到正常数字的情况。

解决方案 #

方案1：子组件增加空值兜底逻辑 #

直接在价格处理逻辑中增加空值判断，避免读取不存在的属性：

// 可选链判断price是否存在，不存在则默认取0，也可根据需求替换为占位符文本
const number = parseInt(props.detail?.price ?? 0, 10)
const toLocale = number.toLocaleString("ko-KR")

方案2：父组件未拿到数据前不渲染子组件 #

修改父组件逻辑，数据加载完成前显示加载状态，避免子组件接收到空对象：

function Page(props) {
    const productId = props.match.params.productId
    // 初始状态设为null，方便判断是否加载完成
    const [Product, setProduct] = useState(null)

    useEffect(() => {
        axios.get(`/api/product/products_by_id?id=${productId}&type=single`)
        .then(response =>{
            setProduct(response.data[0])
        })
        .catch(err=> alert(err))
    // 把productId加入依赖数组，路由参数变化时自动重新请求数据
    }, [productId])

    // 数据未返回时显示加载状态
    if (!Product) return <div>商品数据加载中...</div>

    return (
        <div style={{width:'100%', padding: '3rem 4rem'}}>
            <div style={{display:'flex', justifyContent: 'center',alignItems: 'center', paddingBottom:'40px'}}>
                 <h1 style={{fontWeight:900}}>{Product.title}</h1>
            </div>
                <br/>
                <br/>
                <Row gutter={[16,16]}>
                    <Col sm={24} lg={12} ><ProductImage detail={Product}/></Col>
                    <Col sm={24} lg={12}><ProductInfo detail={Product}/></Col>
                </Row>
            </div>
    )
}

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