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