UseMemo hat keinen Rückgabewert

Question

Ich habe das folgende Szenario. Ich übergebe ein Array von Objekten (Häusern) an die Komponente. Dann möchte ich es in der useMemo-Funktion durchlaufen und in der Return-Methode anzeigen. Allerdings kann ich nichts erkennen. UseMemo wird aufgerufen und läuft, aber wie gesagt, ich sehe keine Objekte

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 回调内的 {} 括号。希望对您有帮助