javascript - 在我的路由文件中传递函数/方法 react

Question

在过去的几天里我做了很多搜索，并且尝试了很多建议的答案，但要么无法理解答案，要么它们不起作用，要么这只是无法解决的问题做完了。我正在为我的网站构建购物车，需要能够将商品添加到购物车并将更新的数量添加到我的购物车图标。我尝试使用 redux 但无法让它工作，所以暂时我想将购物车保留在主文件上并将其传递给我需要它的组件。我遇到的问题是我正在尝试传递我的 addToCart 方法，但我无法让它工作

app.js

addToCart(id) {
    axios.get(`http://localhost:8080/add-to-cart/${id}`)
        .then(response => {
            console.log(response)
        }
  }

  render() {
    // const MyProductPage = (props) => {
    //   return (
    //     <TestProducts
    //       addToCart={this.addToCart.bind(this)}
    //       {...props}
    //     />
    //   );
    // }
    return (
      <Router>
        <div>
          <Header />
          <Route exact path='/' component={Home} />
          {/* <Route path='/products' render={MyProductPage} /> */}
          <Route path="/products" render={props => <TestProducts addToCart = {this.addToCart} {...props} />} />
          <Route path='/about-us' component={About} />
          <Route path='/contact' component={Contact} />
          <Footer />
        </div>
      </Router>
    );
  }
}

测试产品.js

  render() {
    return (
      <div>
        <section>
          <h1 className='text-center'>Products</h1>
          <div className='container'>
            <div className='row'>
            {this.state.products.map(product => {
              return (
                <div className="col-md-4 col-md-offset-2">
                  <img className='product' src={product.imagePath} />
                  <a href="#" id='nutritional-facts' className="btn btn-lg" data-toggle='modal' data-target='#allPurposeNutrional'>Nutritional Facts</a>
                  <div className="modal fade" id="allPurposeNutrional" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
                    <div className="modal-dialog">
                      <div className="modal-content">
                        <div className="modal-header">
                          <button type="button" className="close" data-dismiss="modal" aria-hidden="true"></button>
                          <h4 className="modal-title" id="myModalLabel">Nutrional Facts</h4>
                        </div>
                        <div className="modal-body text-center">
                          <img src={product.nutritionImagePath} alt="All Purpose Nutritional Facts" />
                        </div>
                        <div className="modal-footer">
                          <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <h5>All Natural All Purpose</h5>
                  <button onClick={this.props.addToCart(product._id)} >Add To Cart</button>
                </div>
              )
            })}
            </div>
          </div>
        </section>
      </div>
    );
  }
}

我尽可能多地折叠了代码。当我在 TestProducts 文件中有该方法时，它工作正常，所以我知道代码是好的。当我将代码放入 App.js 文件中时，我没有得到任何控制台，也没有看到任何网络请求，只是没有被调用。

预先感谢您的所有帮助!!!

Answer 1

好吧，我可以指出一件事在您的代码中不起作用，我猜您的应用程序中也有相同格式的代码。

<TestProducts addToCart = {this.addToCart} {...props} />}

请注意，您在 = 符号之间使用了空格

这样做:

<TestProducts addToCart={this.addToCart} {...props} />}

编辑: 我还看到您立即调用 addToCart，我认为应该是

<button onClick={() => this.props.addToCart(product._id)} >Add To Cart</button>