我目前正在使用TypeScript进行Next.js 13项目,在那里我使用useDrag钩子。虽然我在Visual Studio代码编辑器中没有收到任何错误,但在尝试呈现页面时遇到了错误消息。错误消息表明useMemo函数有问题,它无法读取null的属性。
服务器错误
TypeError: Cannot read properties of null (reading 'useMemo')
This error happened while generating the page. Any console logs will be displayed in the terminal window.
这是源代码
import { useDrag } from 'react-dnd';
import { ItemType } from './../types/ItemType';
import React, { useMemo } from 'react';
interface HeaderProps {
width: number;
height: number;
background: string;
}
const Header = ({ width, height, background }: HeaderProps) => {
const [drag, dragRef] = useMemo(() => {
return useDrag(() => ({
type: ItemType.HEADER,
item: { width, height, background },
collect: (monitor) => ({
isDragging: !!monitor.isDragging(),
}),
}), [width, height, background]);
}, [width, height, background]);
const isDragging = drag?.isDragging as boolean;
return (
<div
ref={dragRef}
style={{
width,
height,
background,
opacity: isDragging ? 0.5 : 1,
cursor: 'move',
}}
/>
);
};
export const SideMenu = () => {
return (
<div style={{ width: '300px', background: '#f8f8f8' }}>
<Header width={200} height={50} background="blue" />
</div>
);
};
我错过了什么?还是这里出了什么问题
1条答案
按热度按时间vd8tlhqk1#
确定你什么时候做
npm安装任何东西
您在工作存储库中,因此它可以将依赖项添加到文件中。