React Redux 如何将组件dispatch函数传递给辅助渲染函数

现存关键问题点 #

• removeItem方法缺少dispatch调用，根本没有触发Redux状态更新
  当前mapDispatchToProps里的removeItem只是返回了一个纯action对象，没有把action传递给store，就算传参链路完全通顺，点击删除按钮也不会有任何状态变化，这也是你误以为传参逻辑不通的核心原因。
• 辅助渲染函数的数据源和Redux状态脱节
  你在renderArticles内部直接从localStorage解析购物项，完全没用到connect映射进来的state.items，就算后续补全dispatch逻辑，Redux里的购物项更新了，组件也因为读的是本地存储的旧值，不会触发重新渲染。
• 你当前写的renderArticles({removeItem})调用写法，在语法层面是完全正确的，不存在传参阻塞的问题，只是因为上面两个逻辑漏洞，导致最终功能无法正常运行。

修正后的关键代码段 #

1. 修正mapDispatchToProps的removeItem逻辑，补全dispatch调用：

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}}),
    // 修正：把隐式返回action改为显式dispatch
    removeItem: (atIndex) => dispatch({type: "REMOVE_ITEM_FROM_CART", payload: atIndex})
  }
};

2. 调整renderArticles的入参结构，直接接收从Redux同步过来的购物项，不再自行解析localStorage：

function renderArticles({ articles, removeItem }) {
  // 加空值兜底，避免state未初始化时报错
  if (articles?.length) {
    return articles.map((item, index) => {
      return (
        <div key={index} className="articlesInShoppingBag">
          <text id="dishName"> {item.name}</text>
          <text id="price"> {item.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={item.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>
    )
  }
}

3. 在主组件调用renderArticles时，把Redux映射的购物项、removeItem方法一并传入：

function ShoppingBagModal({ toggleModal, bagModal, removeItem, items }) {
  // 原有弹窗切换的state逻辑保持不变
  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 && (
            // 把Redux拿到的购物项和removeItem显式传入辅助函数
            renderArticles({ articles: items, removeItem })
          )}
          {shoppingBagToggle === 1 && renderPayment()}
        </Modal.Body>
        {/* 原有Modal底部的按钮逻辑保持不变 */}
      </Modal>
    </>
  )
}

补充注意事项 #

• 后续可以给数量选择的Form.Control补充onChange事件，绑定updateCart的dispatch逻辑，否则用户修改购物项数量的时候，状态不会同步更新。
• 用map生成列表的时候，尽量不要用index当key，等后续购物项有唯一id之后，替换成对应id可以减少不必要的重渲染。

内容的提问来源于stack exchange，提问作者devGuy