傳遞函數/方法在我的路由文件反應

我做了一堆搜索過去幾天，我已經嘗試了一堆建議的答案，但要麼無法理解的答案或他們不是工作，或者這只是無法完成的事情。我正在爲我的網站構建一個購物車，並且需要能夠將物品添加到購物車並將更新的數量添加到我的購物車圖標。我嘗試過使用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> 
    ); 
    } 
}

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文件中時，我沒有得到任何控制檯，我沒有看到任何網絡請求它只是沒有被調用。

非常感謝您提供的所有幫助！

來源

2017-09-03 boomer1204

我覺得你的組件太大了，它應該由2或3個較小的組件組成。你也沒有使用容器組件。作爲您的觀點與您的路線之間的一步。至於添加功能，你想分享一堆組件，我會建議再次嘗試工作。它是一個夢幻般的圖書館，並不是那麼難。有很多關於雞蛋頭的教程。檢查出來。 –

感謝您的提示。我最初開始使用REDX，因爲我已經在其他幾個項目中使用過，並且喜歡它，現在我只是在某種程度上需要/希望能夠儘快啓動並運行，但我100 ％計劃重新審視減少，因爲它將百萬倍更容易傳遞數據，但我使用服務器上的會話和一些其他新事物，我還是比較新的。再次感謝提示 – boomer1204

嗯，我可以指出一件事情，不會在你的代碼中工作，我猜你在你的應用程序中有相同的格式化代碼。您使用

=標誌之間的空間

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

通知做到這一點：

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

編輯： 我也看到你在呼喚addToCart直線距離，我認爲它應該是

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

來源

2017-09-03 08:24:32 Tomasz

欣賞。不幸的是，它並沒有幫助解決問題。 – boomer1204

@ boomer1204請檢查編輯。 – Tomasz

太棒了。我現在至少得到網絡電話。我想，當你把一些東西作爲道具傳遞下去時，你可以馬上叫它。感謝您的幫助，我將不得不弄清楚現在我搞砸了的其他區域:) – boomer1204

傳遞函數/方法在我的路由文件反應

回答

相關問題