TypeError: Cannot read properties of undefined (reading 'subscribe')
Hi, I have the following code and I keep getting the error "Cannot read properties of undefined (reading 'subscribe'), and I can't figure out how to fix it. This is the code:
When I hard refresh the page, it loads for a second and renders but then immediately after the error comes.
export default function Page({ params }: { params: { subject: string } }) {
const router = useRouter();
const pathname = usePathname()
const segments = pathname.split('/');
const subject = segments[2];
const topic = segments[3];
const { data: topics, isLoading: topicsLoading } = useQuery(
['topics'],
async () => {
const response = await fetch('/api/topiclist');
const data = await response.json();
console.log(data); // Log the response data
return data.map((topic: { name: string }) => topic.name.toLowerCase());
}
);
const { data: subjects, isLoading: subjectsLoading } = useQuery(
['subjects'],
async () => {
const response = await fetch('/api/subjectlist');
const data = await response.json();
console.log(data); // Log the response data
return data.map((subject: { name: string }) => subject.name.toLowerCase());
}
);
if (subjects && !subjects.includes(subject)) {
return <p>Exam not found</p>;
}
const capitalizedSubject =
params.subject.charAt(0).toUpperCase() + params.subject.slice(1);
return (
<div>
<h1>{capitalizedSubject} Page</h1>
<h2>Topics for ID: </h2>
<ul>
{topicsLoading ? (
<div>Loading topics...</div>
) : topics && topics.length > 0 ? (
topics.map((topic: string, index: number) => (
<CommandItem key={index}>
<Calendar className="mr-2 h-4 w-4" />
<Link href={`/exams/${topic}`}>{topic}</Link>
</CommandItem>
))
) : (
<div>No topics available.</div>
)}
</ul>
</div>
);
}export default function Page({ params }: { params: { subject: string } }) {
const router = useRouter();
const pathname = usePathname()
const segments = pathname.split('/');
const subject = segments[2];
const topic = segments[3];
const { data: topics, isLoading: topicsLoading } = useQuery(
['topics'],
async () => {
const response = await fetch('/api/topiclist');
const data = await response.json();
console.log(data); // Log the response data
return data.map((topic: { name: string }) => topic.name.toLowerCase());
}
);
const { data: subjects, isLoading: subjectsLoading } = useQuery(
['subjects'],
async () => {
const response = await fetch('/api/subjectlist');
const data = await response.json();
console.log(data); // Log the response data
return data.map((subject: { name: string }) => subject.name.toLowerCase());
}
);
if (subjects && !subjects.includes(subject)) {
return <p>Exam not found</p>;
}
const capitalizedSubject =
params.subject.charAt(0).toUpperCase() + params.subject.slice(1);
return (
<div>
<h1>{capitalizedSubject} Page</h1>
<h2>Topics for ID: </h2>
<ul>
{topicsLoading ? (
<div>Loading topics...</div>
) : topics && topics.length > 0 ? (
topics.map((topic: string, index: number) => (
<CommandItem key={index}>
<Calendar className="mr-2 h-4 w-4" />
<Link href={`/exams/${topic}`}>{topic}</Link>
</CommandItem>
))
) : (
<div>No topics available.</div>
)}
</ul>
</div>
);
}When I hard refresh the page, it loads for a second and renders but then immediately after the error comes.
