UseMemo n'a pas de valeur de retour

Question

J'ai le scénario suivant. Je passe un tableau d'objets (maisons) au composant. Ensuite, je veux le parcourir dans la fonction useMemo et l'afficher dans la méthode de retour. Cependant, je ne vois rien. UseMemo est appelé et s'exécute mais comme je l'ai dit je ne vois aucun objet

export default function CompactView({ houses }) {

const houseMemo = useMemo(() => {
houses?.map((house) => {
  return (
       <div>
        ...
       </div>              
     );
   });
}, [houses]);

return (
<>
 ...
  <div>
    {houseMemo}
  </div>
</>

 );
}

Answer 1

Le problème que vous rencontrez concerne les fonctions fléchées dans useMemo. Il manque une instruction return. Votre code devrait ressembler à ceci :

const houseMemo = useMemo(() => {
return houses?.map((house) => {
  return (
       

        ...
       
              
     );
   });
}, [houses]);

Notez le retour avant houses?.map ou vous pouvez le modifier par :

const houseMemo = React.useMemo(
    () =>
      houses?.map((house) => {
        return 
...
;
      }),
    [houses]
  );

Dans le deuxième exemple de code, j'ai supprimé les crochets {} à l'intérieur du rappel useMemo. J'espère que cela vous aidera