reactjs - 如何将会话详细信息传递给反应中的功能组件？

Question

我有一个功能组件，它接受使用 Reactjs 实现的道具。在功能组件内部，我想访问会话 ID（或用户 ID）。因此，我实现了组件如下，

import React from 'react';

import styled from 'styled-components';
import {Link} from "react-router-dom";
import {ProductConsumer} from "../context";
import {connect} from "react-redux";

const mapStateToProps = ({ session}) => ({
    session
});

const Product = (props, {session}) =>  {

    const {_id, name, img, price } = props.products;

    const addToCartHandler = () => {

        const item = {
            userId: session.userId,
            productId: _id,
            name: name,
            price: price,
            qty: 1
        };

        props.addToCart(item)

        console.log('sent')
    };

        return (

            <ProductWrapper className = "col-9 mx-auto col-md-6 col-lg-3 my-3">
                <div className="card">
                    <ProductConsumer>
                        {value => (
                            <div className="img-container p-5 " >
                                <Link to="/ProductDetails">
                                    <img src={img} alt = "product" className="card-img-top"/>
                                </Link>


                                <button className="cart-btn"  onClick={addToCartHandler}>
                                    <i className="fas fa-cart-plus"/>
                                </button>

                            </div>
                        )}
                    </ProductConsumer>

                    <div className="card-footer d-flex justify-content-between">
                        <p className="align-self-center mb-0">
                            {name }
                        </p>

                        <h5 className="text-blue font-italic mb-0">
                            <span className="mr-1">$</span>
                            {price }
                        </h5>
                    </div>
                </div>
            </ProductWrapper>

        );



}

const ProductWrapper = styled.div`
    //some css
`

export default connect(
    mapStateToProps
)(Product);

当我将功能组件实现为const Product = (props, {session}) => {//rest of the impementation}时，它接受道具但不获取会话值（它说“未定义”）。当我只通过类似的会话时const Product = ({session}) => {//rest of the impementation}，它会获取会话详细信息。但是我想将 props 和 session 都传递给组件，但我不明白如何实现它。有人可以帮帮我吗？

标签： reactjsreact-functional-component