javascript - React父函数不接收子参数

Question

我面临一个奇怪的问题。

我在父组件中创建了函数副本。

const copy = (field, menu) => {
    console.log({ field, menu, localMetaSpec });

    localMetaSpec.menus[menu.id].elements.splice(
        localMetaSpec.menus[menu.id].elements.length,
        0,
      { ...field, id: uuid() }
    );
    return localMetaSpec;
};

然后我把它给了我的子组件，我这样称呼它

[...]
case 'copy':
     return (
         <Tooltip title='Copy'>
             <IconButton
               aria-label='copy'
               onClick={() => {
                 console.log(field);
                 console.log(menu);
                 actions.copy(field, menu);
               }}
             >
             <FileCopyIcon />
         </IconButton>
     </Tooltip>
    );
[...]

正如您在控制台中看到的，field和menu是objects，但是当作为函数中的参数接收时，它们变成undefined。

为什么会这样？

标签： javascriptreactjs

Answer 1

好吧，问题出在我称之为子组件的父组件中：

<Menu
  actions={{
    copy: () => copy(),
    delete: () => deleteElement(),
  }}
  classes={classes}
  elements={elements}
  key={menu.id}
  menu={menu}
/>

我没有通过原始函数传递参数。所以我这样做了：

<Menu
  actions={{
    copy: (fieldParam, menuParam) => copy(fieldParam, menuParam),
    delete: () => deleteElement(),
  }}
  classes={classes}
  elements={elements}
  key={menu.id}
  menu={menu}
/>