Question

过去几天我做了一堆搜索，我尝试了一堆建议的答案，但要么能够理解答案，要么它们不起作用或者这只是一些东西无法做到的。我正在为我的网站构建购物车，并且需要能够将商品添加到购物车并将更新后的数量添加到购物车图标中。我尝试使用redux但是无法让它工作，所以暂时我想将购物车放在主文件上并将其传递给我需要它的组件。我遇到的问题是我＆＃39 ;我试图通过我的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>
    );
  }
}

testProducts.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>

在我的路由文件中传递函数/方法做出反应

1 个答案: