我希望有人能帮助我确定我在代码中做错了什么。
该应用程序是一个使用新APP目录和NextJS的Employee Search。

Works：过滤和捕获用户输入的输入字段。API端点返回JSON。
不起作用：如果我在/header/page中包含<SearchResults query={query} />语句。js代码，然后代码连续运行API获取，直到我删除该语句并再次编译。

我会清理一些代码，一旦我有它的工作，但我做错了什么？
/header/page.js

'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} />
      
      
    </>

  )
}

/search-text/page.js

import utilStyles from '/styles/utils.module.css';
import { faMagnifyingGlass, faPeopleGroup, faBuildingUser, faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

export default function SearchText({ query, onQueryChange }) {
  
  return (
      
    <>
      
      <form id='EmployeeSearchText'>
        <div className="container-fluid p-3">
          <div id='Row1' className={`row ${utilStyles.divPadding}`}>
            <div id='Row1Column1' className="col">
              <div id='SearchText-container' className={utilStyles.searchBar}>
                <FontAwesomeIcon icon={faMagnifyingGlass} className={utilStyles.icon} />
                <input id='SearchText' type="text" onChange={(e) => onQueryChange(e.target.value)} className={`form-control ${utilStyles.inputField} ${utilStyles.inputPadding}`} name="SearchText" value={query} placeholder="Search Last Name; First Name; Campus; Deparment....." />
              </div>
            </div>
          </div>
          <div className='text-center'>
            <div id='Row2' className={`row ${utilStyles.divPadding}`}>
              <div id='Row2Column1' className="col">
                <div id='Employees-container'>
                  <button id='EmployeeListing' className={utilStyles.btnYellow}>Employees&nbsp;&nbsp;<FontAwesomeIcon icon={faPeopleGroup} /></button>
                </div>
              </div>
              <div id='Row2Column2' className="col">
                <div id='DepartmentListing-container'>
                  <button id='DepartmentListing' className={utilStyles.btnYellow} type="button">Department Listing&nbsp;&nbsp;<FontAwesomeIcon icon={faBuildingUser} /></button>
                </div>
              </div>
              <div id='Row2Column3' className="col">
                <div id='SearchTextReset-container'>
                  <button id='SearchTextReset' className={utilStyles.btnGrey} type="button">Reset&nbsp;&nbsp;<FontAwesomeIcon icon={faArrowsRotate} /></button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>

    </>
  
  )
}

/search-results/page.js

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

export default async function SearchResults( {query} ) {
  
  async function getEmployees() {
    const res = await fetch('https:xxxxxx?searchinput=${query}');
    
    const directory = await res.json();
    return directory;
  }
  
  console.log({query});
  const employees = await getEmployees();

  const emp = employees.map((employee, index, array) => {
    
    return (
        
      <div 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>
       
  );
}