Search组件输入查询报错TypeError: undefined is not an object (evaluating 'results.length')

核心问题 #

错误TypeError: undefined is not an object (evaluating 'results.length')的根源是前后端数据格式不匹配：

• 前端代码中，你期望API返回包含results字段的对象，因此执行了setResults(res.results)
• 但后端API实际直接返回查询到的数组（res.json(searchData)），没有外层results包裹，导致res.results为undefined，最终results状态被设为undefined，后续访问results.length触发报错。

修复方案（二选一即可） #

方案一：修改前端代码，适配后端返回格式 #

在onChange函数的fetch回调中，直接将返回的数组赋值给results：

fetch(searchEndpoint(query))
  .then((res) => res.json())
  .then((res) => {
    // 直接使用返回的数组，不再取res.results
    setResults(res);
  })
  // 建议添加错误捕获，避免网络或API错误导致页面异常
  .catch((err) => {
    console.error('搜索请求失败:', err);
    setResults([]);
  });

方案二：修改后端API，返回前端期望的格式 #

在nextSearch.js中，将查询结果包装到results字段中，匹配前端预期：

// 替换原res.json(searchData)
res.json({ results: searchData });

同时修正后端类型定义，确保类型与实际返回一致：

// 修正为匹配实际返回结构的类型
type Data = {
  results: { id: string; title: string }[]; // 对应prisma查询结果的结构
};

额外优化建议 #

• 防抖处理：当前输入框每输入一个字符就发起一次请求，建议添加防抖逻辑（如setTimeout），减少不必要的API调用，提升性能。
• 空值防护：渲染列表前增加空值判断，比如active && results?.length > 0，避免results为undefined时的错误。
• 请求清理：组件卸载时取消未完成的fetch请求，避免内存泄漏或设置已卸载组件的状态。

内容的提问来源于stack exchange，提问作者gndclouds