在 react-redux 中将函数从子组件传递给父组件答案

【问题标题】：Passing function from child to parent component in react-redux在 react-redux 中将函数从子组件传递给父组件
【发布时间】：2021-10-13 15:54:27
【问题描述】：

我遇到了一个在 react-redux 中找不到解决方案的问题！我有一个存在于子组件上的函数："onClick={() => addToCart(product)}" 每次我点击应用程序 UI 上的按钮时都会弹出错误消息：“TypeError：addToCart 不是函数”。我尝试了几种解决方法但徒劳无功：父组件代码：


class Jeans extends Component {
  render () {
    return (
      <>
        <PanelHeader size="sm" />
        <ProductList 
          addToCart = {this.addToCart}
          products={jeans}
          image={jeans1}
          header='Jeans For Men'
          description='Foundation Of Contemporary Wardrobes, 
          Whether Tailored Or Super Skinny, Straight or Slim, 
          Biker or Destroyed, Our Denim Collection Caters To 
          Every Style And Silhouette.'
        />
      </>
      );
    }
  }


const mapStateToProps = (state)=> {
  return {
      products: state.products
       }
  }

const mapDispatchToProps = (dispatch) => {
      return {
        addToCart: (id) => {dispatch(addToCart(id))}
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Jeans);```
and Child component where the function lives:


```class ProductCard extends Component {
  render() {
    const {image, product, key, addToCart} = this.props
    return (
      <Col
        lg={4}
        md={6}
        sm={6}
        xs={12}
        className="font-icon-list"
        key={key}
      ><Card>
        <CardImg img src={image} alt="product"/>
          <CardBody>
            <CardTitle className='d-inline align-middle text-danger'>{product.title}</CardTitle>
            <CardTitle className='d-inline align-middle float-right h5'><strong>{product.price}</strong></CardTitle>
            <CardText className='my-2'>{product.description}</CardText>
            <Button>
              <div className="col-md-12 text-center">
                <div className="buttons d-flex flex-row">
                  <div className="cart"><i className="fa fa-shopping-cart"></i>
                    </div> 
                  <button onClick={() => addToCart(product)} className="btn btn-success cart-button px-5">Add to Cart</button>
                </div>
              </div>
            </Button>
          </CardBody>
        </Card>
      </Col>
    )
  }
}

export default ProductCard```

**Thank you in advance for your time reviewing my question!**

There is an intermediate component between Parent (Jeans) and Child (Productcard) called (Productlist) so the order goes: "Jeans" --> "ProductList" --> "ProductCard".

【问题讨论】：

您忘记添加“道具”了吗？这样你就有了 this.props.addToCart 如下： { }
@mdbeus 我按照你说的做了，但错误仍然存在！我想我错过了一些流程：我也会发布我的 ProductList！
我在其他地方也有类似问题的答案，How to set one component's state from another component in React，希望对您有所帮助！
@ HoldOffHunger 我读了你关于状态的帖子，但是如果你能代替通过组件改变状态将我引导到函数，我将不胜感激！谢谢！
我要指出我的应用程序没有常规流程：index.js-->App-->“组件”。因为我是 redux-react 的新手，所以我也会发布我的 index.js，因为我可能会在用包装整个项目时出错！

标签： javascript react-redux

【解决方案1】：

ProductList 组件：

const ProductList = ({products, header, description, image, addToCart}) => {
  return (
    <div className="content">
        <Row>
          <Col md={12}>
            <Card>
              <CardHeader>
                <h5 className="title">{header}</h5>
                <p className="category">{description}</p>
              </CardHeader>
              <CardBody className="all-icons">
                <Row>
                  {products.map((product, key) => {
                    return (
                      <ProductCard 
                        addToCart = {addToCart}
                        key={key} 
                        product={product} 
                        image={image}
                      />
                    );
                  })}
                </Row>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </div>  
      );
    }
    
export default ProductList;```

【讨论】：

@Harun Diluka Heshan 我认为我发布的内容远远超过基本信息。我正在一个 eshop 项目中使用 recat-redux，并希望向 addToCart 按钮添加功能！我应该发布我的减速器、操作等吗？

【解决方案2】：

index.js 包含以下代码：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.css";
import "assets/scss/now-ui-dashboard.scss?v1.5.0";
import "assets/css/demo.css";
import { Provider } from "react-redux";
import AdminLayout from "layouts/Admin.js";

import store from "./redux/store"

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <Switch>
        <Route path="/admin" render={(props) => <AdminLayout {...props} />} />
        <Redirect to="/admin/dashboard" />
      </Switch>
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

【讨论】：