UseMemo tidak mempunyai nilai pulangan

Question

Saya mempunyai senario berikut. Saya menghantar pelbagai objek (rumah) kepada komponen. Kemudian saya ingin mengulanginya dalam fungsi useMemo dan memaparkannya dalam kaedah pulangan. Namun, saya tidak nampak apa-apa. UseMemo dipanggil dan dijalankan, tetapi seperti yang saya katakan, saya tidak nampak sebarang objek

export default function CompactView({ houses }) {

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

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

 );
}

Answer 1

Masalah yang anda hadapi ialah dengan fungsi anak panah dalam useMemo. Ia tiada penyata pulangan. Kod anda sepatutnya kelihatan seperti ini:

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

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

Perhatikan pulangan sebelum houses?.map atau anda boleh menukarnya kepada:

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

Dalam contoh kod kedua, saya mengalih keluar kurungan {} dalam panggilan balik useMemo. Semoga ia membantu anda