React/MUI：固定顶部栏的Autocomplete组件如何在不同页面展示搜索结果

直接给出结论：不推荐用props传递，因为全局顶部栏和页面组件并非直接父子层级，props透传会导致代码冗余、维护困难。更合适的方案是全局状态管理或路由传参，具体选择取决于你的需求场景：

方案1：全局状态管理（推荐用于在当前页面展示结果） #

通过React Context API、Zustand、Redux等工具实现全局状态共享，让顶部栏的搜索结果能被任意页面组件读取。以Context API为例：

步骤1：创建搜索上下文 #

import { createContext, useContext, useState } from 'react';

const SearchContext = createContext();

export function SearchProvider({ children }) {
  const [activeSearchResult, setActiveSearchResult] = useState(null);

  return (
    <SearchContext.Provider value={{ activeSearchResult, setActiveSearchResult }}>
      {children}
    </SearchContext.Provider>
  );
}

// 自定义钩子简化上下文调用
export function useSearch() {
  return useContext(SearchContext);
}

记得把SearchProvider包裹在根组件（比如App.js）外层，确保全局组件都能访问到上下文。

步骤2：修改顶部栏的Autocomplete组件 #

在Autocomplete的onChange回调中更新全局状态：

import { useSearch } from './SearchContext';

// 全局顶部栏组件
function TopNavbar() {
  const { setActiveSearchResult } = useSearch();
  const interests = [/* 你的兴趣数据数组 */];

  return (
    <Autocomplete
      fullWidth
      id="free-solo-demo"
      freeSolo
      options={interests.map((option) => option.name)}
      renderInput={(params) => <TextField {...params} placeholder="Search" />}
      renderOption={renderOption}
      onChange={(event, selectedValue) => {
        // 根据选中的name找到完整的兴趣对象
        const matchedInterest = interests.find(
          item => item.name === selectedValue
        );
        setActiveSearchResult(matchedInterest);
      }}
    />
  );
}

步骤3：在页面组件中读取并展示结果 #

任意页面都可以通过useSearch钩子获取搜索结果：

import { useSearch } from './SearchContext';

function HomePage() {
  const { activeSearchResult } = useSearch();

  return (
    <div className="page-content">
      {activeSearchResult && (
        <div className="search-result-card">
          <h3>搜索结果</h3>
          <p>名称：{activeSearchResult.name}</p>
          <p>描述：{activeSearchResult.description}</p>
          {/* 其他需要展示的字段 */}
        </div>
      )}
      {/* 页面原有内容 */}
    </div>
  );
}

方案2：路由传参（推荐用于跳转到独立结果页） #

如果你的需求是用户选择搜索项后跳转到专门的结果页面，可以用路由传递参数的方式：

步骤1：修改顶部栏的Autocomplete跳转逻辑 #

import { useNavigate } from 'react-router-dom';

function TopNavbar() {
  const navigate = useNavigate();
  const interests = [/* 你的兴趣数据数组 */];

  return (
    <Autocomplete
      // 其他属性不变
      onChange={(event, selectedValue) => {
        const matchedInterest = interests.find(
          item => item.name === selectedValue
        );
        if (matchedInterest) {
          // 跳转到结果页并携带id参数
          navigate(`/search-result/${matchedInterest.id}`);
        }
      }}
    />
  );
}

步骤2：在结果页读取路由参数 #

import { useParams } from 'react-router-dom';

function SearchResultPage() {
  const { id } = useParams();
  const interests = [/* 你的兴趣数据数组 */];
  const searchResult = interests.find(item => item.id === id);

  if (!searchResult) {
    return <div>未找到匹配结果</div>;
  }

  return (
    <div className="result-page">
      <h1>{searchResult.name}</h1>
      <div>{searchResult.details}</div>
    </div>
  );
}

为什么不推荐props传递？ #

全局顶部栏通常是独立于页面组件的层级（比如在App.js中直接渲染，和路由出口同级），如果用props传递，需要层层向上再向下透传状态，不仅代码冗余，后续新增页面时还要重复修改传递逻辑，维护成本极高。

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