Me enfrento a un problema extraño.

Creé mi copia de función en mi componente principal.

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;
};

Luego se lo di a mi componente hijo y lo llamé así

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

Como puede ver en la consola, campo y menú son objetos , pero cuando se reciben como parámetro en la función se vuelven indefinidos . ingrese la descripción de la imagen aquí

¿Por qué está pasando esto?

1
Ugo Lfe 22 ene. 2021 a las 15:01

1 respuesta

La mejor respuesta

Bueno, el problema fue del componente principal donde llamé al secundario:

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

No estaba pasando el parámetro a través de la función original. Entonces hice eso:

<Menu
  actions={{
    copy: (fieldParam, menuParam) => copy(fieldParam, menuParam),
    delete: () => deleteElement(),
  }}
  classes={classes}
  elements={elements}
  key={menu.id}
  menu={menu}
/>
0
Tyler2P 22 ene. 2021 a las 23:24