Javascript React组件工作正常，但尝试使用useMemo（）会导致错误

我有一张里面有会议预定的表格。其中一部分是日历组件，它有一个相当复杂的UI

<Calendar fullName={fullName} email={email} onEventScheduled={onEventScheduled} />

后来

<MemoizedCalendar fullName={fullName} email={email} onEventScheduled={onEventScheduled} />

（我碰巧使用了Formik，但是该组件在上面的

Calendar

中运行良好，只是

memorizedCalendar

失败了）

编辑：我还尝试了

useCallback（）

之后

值得一提的是，如果组件接收函数作为道具，则需要使用useCallback钩子，以便它仅在必要时再次声明函数。否则，每次渲染时道具都会不同，因为函数道具总是有一个新的引用

它修复了错误，但在修改

电子邮件

、

全名

和

onEventScheduled

之外的项目时，仍会不必要地重新呈现

---

如何记忆此钩子组件？

要使用

usemo

记忆组件JSX树部分，首先需要在

usemo

中单独呈现它：

// I usually prefix the name of this variable with rendered* so
// that the user below knows how to use it properly
const renderedCalendar = useMemo(() => {
  // This code below tells react to render Calendar with given props.
  // This JSX will be transformed into a function call and it will
  // happen only after the dependency array given to useMemo changes.
  return <Calendar fullName={fullName} email={email} onEventScheduled={onEventScheduled} />
}, [fullName, email, onEventScheduled]);

//我通常在这个变量的名称前面加上rendered*so
//下面的用户知道如何正确使用它
const renderedCalendar=useMoom（（）=>{
//下面的代码告诉react使用给定的道具渲染日历。
//这个JSX将被转换成一个函数调用，它将
//仅在指定给UseMoom的依赖项数组更改后发生。
返回
}，[全名，电子邮件，onEventScheduled]；

然后将其用作JSX树中的值而不是组件：

return (
  <div>
    ...
    {renderedCalendar}
  </div>
);

返回(
...
{renderedCalendar}
);

Calendar是一个React组件，而不是一个简单的类。您需要在

usemo

中使用JSX语法，才能使其工作：

return

。您还需要将memonized值用作已渲染的组件，而不是要渲染的组件。执行此操作：

const memoizedCalendar=useMemo（…）

然后在JSX

{memoizedCalendar}

中在下面添加了一个答案

const MemoizedCalendar = useCallback(() => {
    return Calendar(email, fullName, onEventScheduled);
  }, [email, fullName, onEventScheduled]);

// I usually prefix the name of this variable with rendered* so
// that the user below knows how to use it properly
const renderedCalendar = useMemo(() => {
  // This code below tells react to render Calendar with given props.
  // This JSX will be transformed into a function call and it will
  // happen only after the dependency array given to useMemo changes.
  return <Calendar fullName={fullName} email={email} onEventScheduled={onEventScheduled} />
}, [fullName, email, onEventScheduled]);

return (
  <div>
    ...
    {renderedCalendar}
  </div>
);