时间戳

首页 > 解决方案 > 在反应中的功能组件之间传递方法

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

问题描述

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

家长

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);

孩子

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: ${50}</srong>
            </div>
        </div>
    );
};

export default connect(
    mapStateToProps
)(CartItem);

我尝试直接在子组件中实现该功能，它工作正常。此方法负责增加数据库（MongoDB）中产品的数量。但不显示更新的值。因此，我在父组件中实现了“增量”功能

标签： reactjsreact-functional-component

解决方案

问题是这一行：

const {increment} = props.increment;

那是试图访问props.increment.increment，这是未定义的。你要么打算做

const increment = props.increment;

或者

const {increment} = props;

推荐阅读