UseMemo 沒有回傳值

Question

我有以下場景。我將物件數組（房屋）傳遞給組件。然後我想在 useMemo 函數中循環遍歷它並在 return 方法中顯示它。但是，我什麼也看不見。 UseMemo 被呼叫並運行，但正如我所說，我沒有看到任何物件

export default function CompactView({ houses }) {

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

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

 );
}

Answer 1

您遇到的問題是 useMemo 中的箭頭函數。它缺少退貨聲明。您的程式碼應如下所示：

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

        …
       
     );
   });
}, [houses]);

注意 houses?.map 之前的返回，或者您可以將其更改為：

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

在第二個程式碼範例中，我刪除了 useMemo 回呼內的 {} 括號。希望對您有幫助