阻止useState呈現初始值

當我渲染此組件product是{}之后的第一渲染，然后在第二個渲染和前進的，它給了我，我找它來自我的物件資料庫。

我的問題是如何防止初始值的product是{}要呈現？因為當我想回圈它時它總是拋出一個錯誤。

import React , {useState , useEffect} from 'react'
import { Row, Col, Image, ListGroup, Card, Button } from 'react-bootstrap'
import {Link} from 'react-router-dom'
import Rating from '../components/Rating'
import axios from 'axios'


const ProductScreen = ({match}) => {
    const [product , setProduct] = useState({})   
    useEffect(()=>{
        let componentMounted = true
        const fetchProducts =  async ()=>{
            const {data} = await axios.get(`http://172.30.246.130:5000/api/products/${match.params.id}`)
            if(componentMounted){
                setProduct(data) 
            }
        }
        fetchProducts()
        return () => {
            componentMounted = false
        }
    },[match,product ])
    
    return (
        <>
            <Link className='btn btn-light my-3' to='/'>
            Go Back
            </Link>
            <Row>
                <Col md={6}>
                <Image src={product.image} alt={product.name} />
                </Col>
                <Col md={3}>
                    <ListGroup variant='flush'>
                        <ListGroup.Item>
                <h3>{product.name}</h3>
                        </ListGroup.Item>

                <ListGroup.Item>
                    <Rating rating={product.rating} reviews={product.numReviews}/>
                </ListGroup.Item>
                <ListGroup.Item>
                <strong> Price: ${product.price}</strong>
                </ListGroup.Item>
                <ListGroup.Item>
                    <strong>Description :</strong> {product.description}
                </ListGroup.Item>
                    </ListGroup>
                </Col>
                <Col md={3}>
                    <Card>
                        <ListGroup>
                            <ListGroup.Item>
                                <Row>
                                    <Col>
                                    Price :
                                    </Col>
                                    <Col>
                                    <strong>${product.price}</strong>
                                    </Col>
                                </Row>
                            </ListGroup.Item>
                            <ListGroup.Item>
                                <Row>
                                    <Col>
                                    Status :
                                    </Col>
                                    <Col>
                                    <strong>{product.countInStock > 0 ? 'In Stock' : "Out Of Stock"}</strong>
                                    </Col>
                                </Row>
                            </ListGroup.Item>
                            <ListGroup.Item>
                                <Row>
                                    <Col>
                                    Sizes :
                                    </Col>
                                    <Col>
                                   {console.log(product)}
                                    </Col>
                                </Row>
                            </ListGroup.Item>
                            <ListGroup.Item className='d-grid gap-2'>
                                <Button type='button' disabled={product.countInStock === 0}>
                                    Add To Cart
                                </Button>
                            </ListGroup.Item>
                        </ListGroup>
                    </Card>
                
                </Col>
            </Row>
        </>
    )
}

export default ProductScreen

uj5u.com熱心網友回復：

您無法阻止呈現初始狀態。

如果該組件在沒有 的情況下無法有效呈現product，那么product應該是它接收的一個 prop，而不是它獲取的狀態成員。fetch 應該在父組件中。

但是，如果您希望提取保留在組件中，則需要設定一個標記值（如null）并根據該標記值對渲染進行分支，例如：

if (!product) {
    return /* ...render a "loading" message... */;
}
// ..render `product` here...

uj5u.com熱心網友回復：

product從useEffectas的依賴項中洗掉將觸發回呼并導致無限回圈。

useEffect(() => {
  ...      
},[match])

要product在獲取之前不渲染任何內容，請使用類似undefined/null初始狀態的虛假值：

const [product , setProduct] = useState();

并product在回傳 JSX 之前檢查：

if(!product) return null;

return (
 <>
  <Link className='btn btn-light my-3' to='/'>
 ...
)

標籤：javascript 反应

上一篇：如何從JS字串中提取某些字符

下一篇：如何在setTimeout期間停止點擊效果？