如果希望在不同的页面上显示自动完成结果，则需要将状态和选项作为 prop 传递给该页面上的组件。
实现此目的的一种方法是将自动完成组件的状态存储在较高级别的组件中，如负责呈现页的父组件。您可以将状态和选项作为 prop 向下传递给自动完成组件。然后，当用户导航到其他页时，您可以将相同的状态和选项传递给该页上的自动完成组件。
下面是一个例子：

// Parent component
function App() {
  const [interests, setInterests] = useState([]);
  const [selectedInterest, setSelectedInterest] = useState("");

  // fetch interests data and set state

  return (
    <div>
      <TopBar interests={interests} selectedInterest={selectedInterest} onInterestChange={setSelectedInterest} />
      // Render other pages and pass interests and selectedInterest as props as needed
    </div>
  );
}

// TopBar component
function TopBar({ interests, selectedInterest, onInterestChange }) {
  return (
    <AppBar>
      <Autocomplete
        fullWidth
        id="free-solo-demo"
        freeSolo
        options={interests.map((option) => option.name)}
        value={selectedInterest}
        onInputChange={(event, newInputValue) => {
          onInterestChange(newInputValue);
        }}
        renderInput={(params) => <TextField {...params} placeholder="Search" />}
        renderOption={renderOption}
      />
    </AppBar>
  );
}