TypeError: undefined is not an object (evaluating 'results.length') in Search Component

Question

处理从/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);
}

Answer 1

在第 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 && (