ReactAPI單個產品未呈現

從 API 映射時，我能夠顯示所有產品，但是當我嘗試顯示單個專案時，我什么也沒有顯示。當我查看開發工具中的網路標簽時，它顯示已成功請求特定專案，但沒有呈現任何內容。

（映射一切的主螢屏作業正常）

import React, { useState, useEffect } from 'react'
import Product from '../components/Product'
import { Row, Col } from 'react-bootstrap'
import axios from 'axios'

const HomeScreen = () => {
    const [products, setProducts] = useState([])

    useEffect(() => {
        const fecthProducts = async () => {
            const { data } = await axios.get('/api/products')

            setProducts(data)
        }

        fecthProducts()
    }, [])

    return (
        <>
            <h1>Jewelry</h1>
            <Row>
                {products.map((product) => (
                    <Col key={product.id} sm={12} md={6} lg={4} xl={3}>
                        <Product product={product} />
                    </Col>
                ))}
            </Row>
        </>
    )
}

export default HomeScreen

（這是單品頁面所在）

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="/">
                GO BACK
            </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 ? 'In Stock' : 'Out of Stock'}
                        </ListGroupItem>
                        <ListGroupItem>
                            <Button
                                className="btn-block"
                                type="button"
                                disabled={product.inStock === 0}
                            >
                                Add to Cart
                            </Button>
                        </ListGroupItem>
                    </ListGroup>
                </Col>
            </Row>
        </>
    )
}

export default ProductScreen

下圖展示了 ProductScreen 頁面的呈現方式

https://i.stack.imgur.com/PJK??pa.png

uj5u.com熱心網友回復：

在產品狀態下，您存盤的是物件陣列而不是單個物件，請在渲染函式中獲得類似結果

product && product[0] && product[0].name

和其他值一樣根據屬性變化。

uj5u.com熱心網友回復：

product在您的情況下是aray一個元素，請改用以下代碼：

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

        setProduct(data[0])
    }

    fetchProduct()
}, [id])

標籤：反应

上一篇：React：如何在我的JSX中使用API呼叫的結果？（范圍問題）

下一篇：React組件未在狀態更新時呈現