products 不是解构后的函数

Question

我在主页上使用 redux 方法接收产品，但我不想在主页上呈现它们，所以我使用单个产品组件来完成，但我又想在反应中显示产品-Alice-carousel 我通过道具在主页发送产品并在单一产品中对其进行解构，并尝试通过jsx创建react-alice-carousel的项目道具但得到错误 product.map is not a function.

我的单一产品组件。

import React from "react";
import AliceCarousel from "react-alice-carousel";
// import { Button, Card, Container } from "react-bootstrap";
// import { FaShoppingCart } from "react-icons/fa";
// import { useDispatch, useSelector } from "react-redux";
import { Link } from "react-router-dom";
// import { AddToCartAction, RemoveFromCart } from "../../actions/cartActions";
import UICARD from "../../interface/UICARD";
// import classes from "./home.module.css";

export function numberWithComas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

const SingleProduct = ({ product }) => {

  const items = product.map((p) => {
    return (
      <Link to={`/product/${p._id}`}>
        <UICARD>
          <img src={p.image} alt={p.name} />
          <span>
            {p.name}
             <span>{p.description}</span>
          </span>

          <span>{p.price}</span>
        </UICARD>
      </Link>
    );
  });

  const responsive = {
    0: {
      items: 4,
    },
    512: {
      items: 6,
    },
  };
  return (
    <div>
      <AliceCarousel
        items={items}
        disableDotsControls
        infinite
        mouseTracking
        responsive={responsive}
      />
    </div>
  );
};

export default SingleProduct;

我的主页

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Products } from "../../actions/productsActions";
import ErrorMessage from "../../helpers/ErrorMessage";
import Loading from "../../helpers/Loading";
import SideBar from "../Home/SideBar";
import SingleProduct from "../Home/SingleProduct";
import classes from '../Home/home.module.css'

const Home = () => {

 

const dispatch = useDispatch();

const productList = useSelector((state) => state.productList);

const { products, error, loading } = productList

console.log(products);
useEffect(() => {
    dispatch(Products());
},[dispatch])

  return (
    <div className ={classes.home}>
      {error && <ErrorMessage variant={error.info?"info":"danger"}>{error}</ErrorMessage>}
      {loading && <Loading />}
      <SideBar />
      <div className={classes.productContainer}>
        {
          products.map((product) => {
            return <SingleProduct product={product} key={product._id} />
          })
        }
      </div>
    </div>
  );
};

export default Home;

Answer 1

你需要像这样改变你的家庭组件，因为 singleProduct 需要有一个 product 作为数组，我建议使用 prop-types 来避免这种问题

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Products } from "../../actions/productsActions";
import ErrorMessage from "../../helpers/ErrorMessage";
import Loading from "../../helpers/Loading";
import SideBar from "../Home/SideBar";
import SingleProduct from "../Home/SingleProduct";
import classes from '../Home/home.module.css'

const Home = () => {

 

const dispatch = useDispatch();

const productList = useSelector((state) => state.productList);

const { products, error, loading } = productList

console.log(products);
useEffect(() => {
    dispatch(Products());
},[dispatch])

  return (
    <div className ={classes.home}>
      {error && <ErrorMessage variant={error.info?"info":"danger"}>{error}</ErrorMessage>}
      {loading && <Loading />}
      <SideBar />
      <div className={classes.productContainer}>
        <SingleProduct product={products} />
      </div>
    </div>
  );
};

export default Home;

products 不是解构后的函数

products is not a function after destructuring

mapping

destructuring

reactjs

redux