为什么我的状态是未定义的，即使我正在设置它

Question

我是 React 和 Redux 的新手。我想问一下为什么当我尝试使用它或在控制台中显示它时在 setState 中设置一个对象是未定义的。

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { Row, Col } from "react-bootstrap";
import axios from 'axios';
import ProductImage from './Sections/ProductImage';
import ProductInfo from './Sections/ProductInfo';

function DetailProduct (props){
    const productId = props.match.params.productId
    const [Product, setProduct] = useState()

    useEffect(()=>{
        axios.get('http://localhost:5000/products/'+productId)
            .then(response =>{
                setProduct(response.data)
                console.log('state '+Product._id)
            })
    }, [])

    return (

        <div className="postPage" style={{width: '100%', padding: '3rem 4rem'}}>       
            <div style={{display:'flex',justifyContent:'center'}}>
                <h1>{Product._id}</h1>
            </div>
            <br/>
            <Row gutter={[16, 16]}>
                <Col lg={12} xs={24}>
                    <ProductImage />
                </Col>
                <Col lg={12} xs={24}>
                    <ProductInfo />
                </Col>
            </Row>
        </div>
    )

}

export default DetailProduct

当页面加载时，它说 Product 是未定义的，即使它假设有一个对象。当我 console.log 有什么 response.data 时，它会向我显示产品需要拥有的信息。抱歉英语不好，谢谢。

Answer 1

问题是当组件第一次渲染时，axios 请求还没有完成运行。此时，Product 将是您设置为默认值的任何内容。在这种情况下，您没有为Product 设置默认值，因此它是未定义的。你可以在 useState 中这样做 const [Product, setProduct] = useState({})

解决此问题的另一种方法是将组件包装在 if 语句中，检查是否已设置 Product。

{Product && (
  <div>your component here</div>
)}

Answer 2

朋友！

就像Tony Nguyen 说的，React 中的 setState 是异步函数。但是如果你想在状态（你的Product）改变时做一些事情，你可以设置另一个useEffect来做这个：

useEffect(()=>{

  // Do somethings if you want to do when Product changed

}, [Product])

如果您有任何问题，请告诉我。 :)