![](/img/trans.png)
[英]TypeError: undefined is not an object (evaluating 'output.length')
[英]TypeError: undefined is not an object (evaluating 'results.length') in Search Component
處理從/api/nextSearch.tsx
返回結果列表的搜索組件,但在輸入框中輸入查詢時,我每次都會收到TypeError: undefined is not an object (evaluating 'results.length') 。
感覺我要么誤解了一些基本邏輯,要么忽略了一些我看不到的簡單東西。
/組件/search.js
import { useCallback, useRef, useState } from "react";
import Link from "next/link";
export default function Search() {
const searchRef = useRef(null);
const [query, setQuery] = useState("");
const [active, setActive] = useState(false);
const [results, setResults] = useState([]);
const searchEndpoint = (query) => `/api/nextSearch?searchString=${query}`;
const onChange = useCallback((event) => {
const query = event.target.value;
setQuery(query);
console.log("Set onChange");
fetch(searchEndpoint(query))
.then((res) => res.json())
.then((res) => {
setResults(res.results);
});
}, []);
const onFocus = useCallback(() => {
setActive(true);
window.addEventListener("click", onClick);
console.log("Set onFocus");
}, []);
const onClick = useCallback((event) => {
if (searchRef.current && !searchRef.current.contains(event.target)) {
setActive(false);
window.removeEventListener("click", onClick);
}
}, []);
return (
<div ref={searchRef}>
<input
onChange={onChange}
onFocus={onFocus}
placeholder="Search posts"
type="text"
value={query}
/>
{active && results.length > 0 && (
<ul className="">
{results.map(({ id, title }) => (
<li className="" key={id}>
<Link href="/posts/[id]" as={`/posts/${id}`}>
<a>{title}</a>
</Link>
</li>
))}
</ul>
)}
</div>
);
}
/api/nextSearch.js
import type { NextApiRequest, NextApiResponse } from "next";
import prisma from "../../lib/prisma";
type Data = {
results: string[];
};
export default async function handle(
req: NextApiRequest,
res: NextApiResponse
) {
const { searchString } = req.query;
const searchData = await prisma.term.findMany({
where: {
title: {
search: searchString,
},
},
});
res.json(searchData);
}
在第 15 行, res.results
似乎未定義
fetch(searchEndpoint(query))
.then((res) => res.json())
.then((res) => {
setResults(res.results);
});
在您的next.js
應用程序中,您定義了一個帶有results
的type Data
,但在您調用res.json(searchData)
時未使用它。
searchData
應該是一個字符串數組,即string[]
嗎? 這會解決您的問題嗎?
return res.json({
results: searchData
});
您也可以解決此問題:
{active && results.length > 0 && (
到
{active && results && results.length > 0 && (
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.