Question

我是React和Redux的新手。我想问为什么在尝试使用setState或在控制台中显示未定义对象时要在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设置默认值，因此未定义。您可以像const [Product, setProduct] = useState({})

这样在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])

如有任何疑问，请告诉我。：）

为什么即使设置了状态也未定义

2 个答案: