reactjs - 如何根据 id 渲染产品

Question

我有一个由 3 个组件组成的页面。呈现在一个页面中。这个应用程序是供服务员获取订单的。除了订单列表之外，我做了所有事情。当用户将食物添加到购物车时，它会添加到 Check.jsx 组件中，一切都很好.但我需要它来处理多个订单。例如，当服务员点击订购一个时，Check.jsx 应该只根据订单 ID 显示产品。我将useCart 库用于 Check.jsx 侧边栏：

function ResponsiveDrawer() {

    const { emptyCart } = useCart();
    const clicker = () => {

        emptyCart()
    };


    const height = window.innerHeight + "px"
    return (

        <motion.div
            initial={{ x: -160 }}
            animate={{ x: 0 }}
            transition={{ delay: 0.2, type: "tween", stiffness: 50, duration: 0.5 }}
            style={{ height: height }}
            className="sidebar" >
            {
                ['1', '2', '3', '4', '5', '6', '7', '8'].map((text, index) => (

                    <div className="list-item" onClick={() => {
                        localStorage.setItem('id', index);
                        clicker()
                    }} key={index}>
                        <Card name={text} colorIndex={index} />
                    </div>
                ))
            }

        </motion.div >
    );
}


export default ResponsiveDrawer;

内容：

  const [cart, setCart] = useState([]);
    const [data, setData] = useState("")
    const [id, setID] = useState()

    useEffect(() => {

    }, [])


    const { addItem } = useCart();
    const container = {
        hidden: { opacity: 0 },
        show: {
            initial: {
                opacity: 0,
            },
            opacity: 1,
            transition: {
                duration: 0.6,

            }
        }
    }


    const item = {
        hidden: { opacity: 0 },
        show: { opacity: 1 },


    }

    useEffect(() => {
        (async function () {
            let { data: tempData } = await axios.get("http://localhost:4000/data");
            setData(tempData)
        })()


    }, [])
    let keys = Object.keys(data)
    useEffect(() => {
    }, [cart])
    const handlePlus = (obj) => {

        setCart([...cart, obj])
    }

    return (
        <div style={{ display: "flex", gap: "20px", marginTop: "20px" }}>
            {
                keys.map((key, indx) => (
                    <div key={indx} className="mywrapper">
                        <p className="cotegory">{key}</p>
                        <Divider />
                        {data[key].map(({ _id: id, ...obj }) => (

                            <motion.div className='products'>

                                <img src={placeholder} alt="x" />
                                <div><p className="firstName">{obj.name}</p>
                                    <p className="secondName">{obj.price} </p></div>

                                <motion.button
                                    whileTap={{ scale: 1.1 }}

                                    className="plus" onClick={() => {

                                        let tempObj = {

                                            id: id,
                                            name: obj.name,
                                            price: obj.price,
                                            orderID: localStorage.getItem('id')

                                        }
                                        addItem(tempObj)
                                    }

                                    }
                                >+ </motion.button>
                            </motion.div>
                        ))}
                    </div>
                ))
            }



        </div >
    )
}

export default Content

并检查所选订单放置的js。它用作购物车：

function Check() {

    const container = {
        hidden: { opacity: 0 },
        show: {
            opacity: 1,
            transition: {
                duration: 1.5
            }
        }
    }


    const itemss = {
        hidden: { opacity: 0 },
        show: { opacity: 1 }
    }
    const {
        totalUniqueItems,
        items,
        updateItemQuantity,
    } = useCart();
    return (
        <div>

            <motion.div
                className="mywrapper"
                variants={container}
                initial="hidden"
                animate="show"
                style={{}}
            >

                <p style={{ fontSize: "24px", marginBottom: '0px' }}> Check list </p>

                <Divider style={{ background: "blue" }} />
                {items.map((item) => (



                    <div key={item.id} className="">

                        <motion.div className='products'>

                            <div><p className="firstName">{item.name}</p>
                                <p className="secondName">{item.price * item.quantity} </p>
                            </div>
                            <div className="productss">

                                <motion.button
                                    whileTap={{ scale: 1.1 }}
                                    className="plus"
                                    onClick={() => updateItemQuantity(item.id, item.quantity + 1)}
                                >+ </motion.button>
                                <p className="quan">{item.quantity}</p>
                                <motion.button
                                    whileTap={{ scale: 1.1 }}
                                    className="pluss"
                                    onClick={() => updateItemQuantity(item.id, item.quantity - 1)}
                                >- </motion.button>

                            </div>
                        </motion.div>
                    </div>

                ))}
            </motion.div>
        </div >
    )
}

export default Check

不知何故，我需要根据订单页面呈现产品。例如，如果用户单击订单 2，则应显示与其相关的内容。我使用useCart 库

标签： reactjs