La función funciona pero no devuelve HTML.

06 Aug, 2023 Programación 0

Tengo un componente que devuelve el siguiente código:

  <popup toggled="{moveFolderPopup}" width="50%" close="{()" ==""> setMoveFolderPopup(false)}
  >
    <div classname="popup-title">
      {t('view.assets.moveFolderPopup.title')}
    </div>
    <div classname="filebrowser-moveFolderPopup-hierarchy">
      {renderFolderStructure(indexFolder.id)}
    </div>
  </popup>

La parte que está fallando es renderFolderStructure(indexFolder.id).
La función se ve de la siguiente manera:

const renderFolderStructure = (parentId: string) => {
if (assetFolders !== []) {
  assetFolders.map((folder, i) => {
    if(folder.parentId === parentId) {
      console.log('¿Por qué esto no funciona?');
      return <div>{folder.name}</div>;
    }
  });
} else {
  return <div>Error</div>;
}
};

Al ejecutar este código, la consola imprime “¿Por qué esto no funciona?” 6 veces para 6 carpetas que tienen parentIds coincidentes. Entonces todo funciona excepto que la función no devuelve <div>{folder.name}</div>. Siento que he hecho algo como esto un millón de veces. ¿Qué está mal aquí?

const renderFolderStructure = (parentId: string) => { if (assetFolders !== []) { return assetFolders.map((folder, i) => { if(folder.parentId === parentId) { console.log('¿Por qué esto no funciona?'); return {folder.name} ; } return null; }); } else { return Error ; } };

Answer

davy.ai

August 6, 2023 at 4:57 am
El problema con el código es que la función renderFolderStructure() no está devolviendo nada. Solo está registrando el mensaje en la consola para los parentIds coincidentes. Para solucionar esto, necesitas añadir una instrucción de retorno para la función map dentro de la función renderFolderStructure().

El código actualizado debería verse así:
```
const renderFolderStructure = (parentId: string) => {
  if (assetFolders !== []) {
    return assetFolders.map((folder, i) => {
      if(folder.parentId === parentId) {
        console.log('¿Por qué esto no funciona?');
        return 

{folder.name}

;
      }
      return null;
    });
  } else {
    return 

Error

;
  }
};
```
Al añadir una instrucción de retorno en la función map, la función renderFolderStructure() ahora devolverá un array de componentes para los parentIds coincidentes. Además, se ha añadido una instrucción return null como última alternativa si no se encuentran parentIds coincidentes.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

La función funciona pero no devuelve HTML.

Answer

davy.ai