React 回調函數不起作用如何解決？

Question

在我的一個反應組件上，我需要使用回調函數。 我的網站建設是這樣的：

<Mainview >
<Header />
<Main />
<Footer />
</Mainview>

在我的一個主要組件中，我使用了這個：

  const Produkt = (produkt, { zumWarenkorbHinzufuegen }) => {

    return (
    <main>
    // ...
    
    <input 
       type="button" 
       value="In den Warenkorb" 
       id="Knopfwarenkorb1" 
       onClick={() => { zumWarenkorbHinzufuegen(produkt.id) }} />
 
    // ...
  
 </main>

在主視圖中我使用了這個：

    <Route path="/bambus-zahnbuerste" component={() => <Produkt id={produkt[0].id}
                name={produkt[0].name}
                bild={produkt[0].bild}
                preis={produkt[0].preis}
                zumWarenkorbHinzufuegen={zumwarenkorb} />} />

<Mainview />中也定義了函數“zumwarenkorb”

因此，當我單擊<Produkt />組件上的按鈕時，出現以下錯誤：

TypeError: zumWarenkorbHinzufuegen is not a function. (In 'zumWarenkorbHinzufuegen(produkt.id)', 'zumWarenkorbHinzufuegen' is undefined)

Answer 1

您的組件的道具通過 Produkt 函數的第一個參數傳遞，或者在您的情況下是produkt參數。 要訪問zumWarenkorbHinzufuegen的值，您必須在函數體中從produkt中解壓它：

const { zumWarenkorbHinzufuegen } = produkt;

Answer 2

您可以在 Produkt 組件中解構 props 以獲取 produkt id 和 zumWarenkorbHinzufuegen 函數。

const Produkt = ({id,  zumWarenkorbHinzufuegen }) => {}

或者你可以保留道具並使用

const Produkt = (props) => {
  ...
  <input type="button" 
         value="In den Warenkorb" 
         id="Knopfwarenkorb1" 
         onClick={() => { props.zumWarenkorbHinzufuegen(props.id) }} 
   />
}