时间戳

首页 > 解决方案 > 为什么我的状态是未定义的，即使我正在设置它

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

问题描述

我是 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 时，它会向我显示产品需要拥有的信息。抱歉英语不好，谢谢。

标签： reactjsreduxreact-reduxstate

解决方案

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

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

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

推荐阅读