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) }} 
   />
}