在反应中的功能组件之间传递方法

Question

我有 2 个组成部分，如下所示。当我尝试将方法（增量）从组件 'CartList' 传递到 'CartItem' 时，它说增量未定义。当我单击按钮时发生错误（在下面的代码中指出）。我该如何解决这个错误？

Parent

import React, {Component} from 'react';

import CartItem from './CartItem';
import {connect} from "react-redux";
import Axios from "axios";

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

const CartList = ({session, ...props}) => {

    const cart = props.cart;

    const increment = (productId) => {
        const item = {
            userId : session.userId,
            productId: productId
        };

        Axios.post('http://localhost:5000/api/cart/increment', item)
            .then(res=>{
                if(res.status === 200){
                    console.log('Incremented');
                }
            })
    };

    return (
        <div className="container-fluid">
            {cart.map(item => {
                return <CartItem key = {item.id} item={item} increment={increment}/> 
            })}

        </div>
    );
};

export default connect(
    mapStateToProps
)(CartList);

Child

import React from 'react';
import {connect} from "react-redux";

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

const CartItem = ({session ,...props}) => {

    const {id,name, price, quantity} =  props.item;
    const {increment} = props.increment;

    return (
        <div className="row my-2 text-capitalize text-center">
            <div className="col-10 mx-auto col-lg-2">
                <img  style={{width: '5rem', height: '5rem'}} className="img-fluid" alt="product "/>
            </div>
            <div className="col-10 mx-auto col-lg-2">
                <span className="d-lg-none">Product: </span>{name}
            </div>
            <div className="col-10 mx-auto col-lg-2">
                <span className="d-lg-none">Price: </span>{price}
            </div>
            <div className="col-10 mx-auto col-lg-2 my-2 my-lg-0">
                <div className="d-flex justify-content-center">
                     <div>
                         <span className="btn btn-black mx-1" >-</span>
                         <span className="btn btn-black mx-1">{quantity}</span>
                         <span className="btn btn-black mx-1" onClick={() => increment(id)}>+</span> //<- Error occurs if I click on this button
                     </div>
                </div>
            </div>
            <div className="col-10 mx-auto col-lg-2">
                <div className="cart-icon" >
                    <i className="fas fa-trash"/>
                </div>
            </div>
            <div className="col-10 mx-auto col-lg-2">
                <srong>Total: </srong>
            </div>
        </div>
    );
};

export default connect(
    mapStateToProps
)(CartItem);

我尝试直接在 child 组件中实现该功能，它工作正常。此方法负责增加数据库中产品的数量 (MongoDB)。但更新后的值不显示。因此，我在 parent 组件

中实现了 'increment' 函数

Answer 1

问题出在这一行：

const {increment} = props.increment;

正在尝试访问未定义的 props.increment.increment。你要么打算做

const increment = props.increment;

或

const {increment} = props;

Answer 2

您好请替换此行

因为当你解构 props 时你不需要 props 的 map key 为了更好地理解 console your props 或查看此文档。 https://medium.com/@lcriswell/destructuring-props-in-react-b1c295005ce0

const {increment} = props.increment;

而不是

const {increment} = props;

希望有用。谢谢

在反应中的功能组件之间传递方法

Passing methods between Functional components in react

reactjs

react-functional-component