ReactJS - Product.颜色是未定义的

Question

嘿，伙计们，我只是想知道为什么会这样。当我尝试console.log(product.color)时，它们显示颜色的结果数组，当我尝试映射数组时，它们显示product未定义的错误。下面是代码

const Product = ({ item }) => {
const params = useParams();
const id = params.id;
const [product, setProduct] = useState({});
const [quantity, setQuantity] = useState(1);
useEffect(() => {
window.scrollTo(0, 0);
}, []);
useEffect(() => {
const getProduct = async () => {
try {
const response = await axios.get(
`http://localhost:8000/api/products/find/${id}`
);
const data = await response.data.product;
setProduct(data);
} catch (error) {
console.log(error.response);
}
};
(async () => await getProduct())();
}, []);
const handleQuantity = (type) => {
if (type === 'dec') {
setQuantity(quantity > 1 ? quantity - 1 : 1);
} else {
setQuantity(quantity + 1);
}
};
return (
<Container>
<Navbar />
<Announcements />
<Wrapper>
<ImageContainer>
<Image src={`${product.img}`} />
</ImageContainer>
<InfoContainer>
<Title>{product.title}</Title>
<Desc>{product.desc}</Desc>
<Price>{product.price}</Price>
<FilterContainer>
<Filter>
<FilterTitle>color</FilterTitle>
{console.log(product.color.length)}
{<FilterColor color={product.color} />}
</Filter>
<Filter>
<FilterTitle>Size</FilterTitle>
<FilterSize>
{/* {product.size.map((elem) => (
<FilterSizeOption key={elem}>{elem}</FilterSizeOption>
))} */}
<FilterSizeOption>{product.size}</FilterSizeOption>
</FilterSize>
</Filter>
</FilterContainer>
<AddContainer>
<AmountContainer>
<Remove onClick={(e) => handleQuantity('dec')} />
<Amount>{quantity}</Amount>
<Add onClick={(e) => handleQuantity('inc')} />
</AmountContainer>
<Button>ADD TO CART</Button>
</AddContainer>
</InfoContainer>
</Wrapper>
<NewsLetter />
<Footer />
</Container>
);
};

this part give me error

<Filter>
<FilterTitle>color</FilterTitle>
{console.log(product.color.length)}
{<FilterColor color={product.color} />}
</Filter>

console.log(product.color)的结果

Array [ "red" ]

但是当我尝试映射product。color

时

Uncaught TypeError: product.color is undefined

Answer 1

渲染时间问题。在第一次渲染产品是空白的，你得到错误。

尝试1

const [product, setProduct] = useState(null);
//...........
//...............
return(
<>
{product && <Container> .......... </Container>}
</>
)

尝试2

product?.color  /// if color not exists it not throw error