ReactJS

Question

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

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

渲染时间问题。 First Render 产品是空白的，你收到错误。

尝试 1

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

尝试 2

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

ReactJS - Product.color 未定义

ReactJS - Product.color is undefined

components

rendering

mern