NextJS新APP目录员工搜索组件API持续请求问题排查

核心问题 #

你遇到的持续发起API请求的原因有两个：

• 你在客户端组件（Home组件标记了'use client'）中直接渲染了async组件SearchResults。Next.js App Router中，客户端组件里的async函数会在每次组件渲染时重新执行，而query的变化会触发Home组件反复渲染，进而导致API请求不断发起。
• fetch的URL使用了单引号，模板字符串${query}没有被解析，实际请求的是https:xxxxxx?searchinput=${query}而非带真实query的URL（这会导致请求无效，但不是持续请求的主因）。

修复方案 #

1. 使用数据请求库缓存请求（以SWR为例） #

客户端组件中推荐用SWR/React Query这类库来管理数据请求，它们会自动缓存请求结果，只有当query变化时才重新发起请求。

首先安装SWR：

npm install swr

2. 修改SearchResults组件 #

将其改为客户端组件，用SWR处理请求，同时修复模板字符串问题：

'use client'
import utilStyles from '/styles/utils.module.css';
import { faPhone, faEnvelope } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import useSWR from 'swr';

// 定义请求函数
const fetcher = async (url) => {
  const res = await fetch(url);
  if (!res.ok) throw new Error('请求失败');
  return res.json();
};

export default function SearchResults({ query }) {
  // 只有当query非空时才发起请求
  const { data: employees, error } = useSWR(
    query ? `https:xxxxxx?searchinput=${query}` : null,
    fetcher
  );

  if (error) return <div>加载失败：{error.message}</div>;
  if (!employees) return <div>加载中...</div>;

  const emp = employees.map((employee) => (
    <div key={employee.NAME || employee.PHONE} className="col col-12 col-sm-6 col-xl-4 mb-4">
      <div className="col-12 mb-4">
        <div className={`card ${utilStyles.cardBody}`}>
          <div className="card-body">
            <div className={`${utilStyles.ribbonLight} ${utilStyles.ribbonBottomRight}`}><span>{employee.CAMPUS}</span></div>
            <h3 className="card-title card-name">{employee.NAME}</h3>
            <h5 className={`${utilStyles.cardSubtitle} ${utilStyles.cardJobtitleNew} mb-2`}>{employee.JOBTITLE}</h5>
            <p className={`${utilStyles.cardText} ${utilStyles.cardDepartment}`}>{employee.DEPARTMENT}</p>
            <div>
              <p className={utilStyles.cardTextBottom}><FontAwesomeIcon icon={faPhone} className={utilStyles.cardTextIcons} /><span className={utilStyles.cardPhoneEmail}>W:</span>{employee.PHONE}</p>
              <p className={utilStyles.cardTextBottom}><FontAwesomeIcon icon={faEnvelope} className={utilStyles.cardTextIcons} /><span className={utilStyles.cardPhoneEmail}>W:</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  ));

  return (
    <div className="container">
      <div className="row">{emp}</div>
    </div>
  );
}

3. 在Home组件中正常引入组件 #

取消注释，引入SearchResults：

'use client'
import { useState } from 'react';
import Header from './header/page.js';
import SearchText from './search-text/page.js';
import SearchResults from './search-results/page.js'; // 取消注释

export default function Home() {
  const [query, setQuery] = useState('');

  return (
    <>
      <Header />
      <SearchText 
         query={query} 
         onQueryChange={setQuery} />
      {query && <SearchResults query={query} />} {/* 可选：只有query非空时渲染结果组件 */}
    </>
  )
}

额外优化点 #

• 给map渲染的元素加上唯一key（用员工的唯一标识，比如姓名+电话），避免React警告。
• 增加加载/错误状态提示，提升用户体验。
• 可以给搜索输入框添加防抖，避免用户输入过程中频繁发起请求（比如用useDebounce钩子，延迟500ms再更新query）。

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