将调度函数传递给辅助函数

Question

我试图将一个调度函数从主函数传递给一个辅助函数，但我很难弄清楚如何做。所以我想在renderArticles中使用removeItem-dispatch-function。代码如下：

import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
import React, {useState} from "react";
import {connect} from "react-redux";
import '../../styles/shoppingBag.css'
import Form from "react-bootstrap/Form";


function renderArticles({removeItem}){
    const articles = JSON.parse(localStorage.getItem("cartItems"));
    console.log(articles);
    if(articles!==null) {
        return articles.map((items, index) => {
            return (
                <div key={index} className="articlesInShoppingBag">
                    <text id="dishName"> {items.name}</text>
                    <text id="price"> {items.price}€ </text>
                    <Form>
                        <Form.Row className="align-items-center">
                                <Form.Label className="mr-sm-2" htmlFor="inlineFormCustomSelect" srOnly>
                                    Preference
                                </Form.Label>
                                <Form.Control
                                    as="select"
                                    className="mr-sm-2"
                                    id="inlineFormCustomSelect"
                                    custom
                                    defaultValue={items.count}
                                >
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>6</option>
                                    <option>7</option>
                                    <option>8</option>
                                    <option>9</option>
                                    <option>10</option>
                                    <option>11</option>
                                </Form.Control>
                    </Form.Row>
                </Form>
                <button className="removeButton" onClick={()=>{removeItem(index)}}>
                    <text>remove</text>
                </button>
                </div>
            )
        })
    }else{
        return(
            <div>
                <text>keine Artikel im Warenkorb</text>
            </div>
        )
    }
}

function renderPayment(){
    return(
        <div>
            <text>Hier entsteht das Payment</text>
        </div>
    )
}

function ShoppingBagModal({toggleModal,bagModal,removeItem}){

    const [shoppingBagToggle,setShoppingBagToggle] = useState(0);

    const increaseShoppingBagToggle=()=>{
        setShoppingBagToggle(shoppingBagToggle+1);
    };

    const decreaseShoppingBagToggle=()=>{
        setShoppingBagToggle(shoppingBagToggle-1);
    };

    const resetShoppingBagToggle=()=>{
        setShoppingBagToggle(0);
    }

    return (
        <>
            <Modal show={bagModal} onHide={toggleModal}>
                <Modal.Header closeButton onClick={resetShoppingBagToggle}>
                    <Modal.Title>
                        {(shoppingBagToggle===0)&&(
                            <text>Warenkorb</text>
                        )}
                        {(shoppingBagToggle===1)&&(
                            <text>Checkout</text>
                        )}
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    {(shoppingBagToggle===0)&&(
                        renderArticles({removeItem})
                    )}
                    {(shoppingBagToggle===1)&&(
                        renderPayment()
                    )}
                </Modal.Body>
                <Modal.Footer>
                    {(shoppingBagToggle===0)&&(
                        <div>
                        <Button variant="secondary" onClick={()=>{
                            toggleModal();
                            resetShoppingBagToggle()
                        }}>
                            Close
                        </Button>
                        <Button
                            className="modalFooter"
                            onClick={increaseShoppingBagToggle}
                        >
                            Zur Bezahlung
                        </Button>
                        </div>
                    )}
                    {(shoppingBagToggle===1)&&(
                        <div>
                            <Button variant="secondary" onClick={decreaseShoppingBagToggle}>
                                Zurück
                            </Button>
                            <Button
                                className="modalFooter"
                            >
                                Jetzt bezahlen
                            </Button>
                        </div>
                    )}
                </Modal.Footer>
            </Modal>
        </>
    );
}

function mapStateToProps(state) {
    return {
        bagModal: state.bagModal,
        items: state.items
    }
}

const  mapDispatchToProps=(dispatch)=>{
    return {
        toggleModal: ()=>dispatch({type:"TOGGLE_SHOPPING_BAG_MODAL"}),
        getOrdersFromLocalStorage: ()=>dispatch({type:"GET_ITEMS_FROM_LOCALSTORAGE"}),
        updateCart: (value,item)=>dispatch({type:"UPDATE_ITEM_IN_CART",payload:{value:value,item:item}}),
        removeItem: (atIndex)=>({type:"REMOVE_ITEM_FROM_CART",payload:atIndex})
    }
};


export default connect(mapStateToProps,mapDispatchToProps)(ShoppingBagModal);

dispatch 函数在 ShoppingBagModal 中访问，应该传递给 renderArticles。 预先感谢您的帮助。