选择从 Databse 获取数据的 MUI 元素 - 单击时始终在屏幕左上方弹出

Question

我遇到以下问题 - 我有一个 React 应用程序，其中有多个 Select 元素 (MUI)。 其中有几个使用数据库中的数据，所有其他人都使用硬编码数据。 最后一个工作得很好，但是那些来自数据库的数据，总是首先在浏览器窗口的左上角闪烁，然后才在他们应该的地方正确呈现。 我在应用程序中使用 useEffect 钩子获取数据，所以在应用程序的第一次渲染时。

这是一个有问题的组件 Select - Search.tsx

import IconButton from "@mui/material/IconButton";
import InputBase from "@mui/material/InputBase";
import {
  FormControl,
  InputLabel,
  MenuItem,
  Paper,
  Select
} from "@mui/material";
import { SearchOutlined } from "@mui/icons-material";
import {  useState } from "react";
import { IState } from "../interfaces";
import { ICountry} from "../interfaces";
import { fetchPlaints, setError } from "../features/plaints/plaintsSlice";
import Error from "./Error";
import { useAppDispatch } from "../hooks";
import { useSelector } from "react-redux";

const Search: any = () => {
  const [searchString, setSearchString] = useState("");
  const [country, setCountry] = useState("");
  // const [err, setErr] = useState(false)
  const selectError = (state: IState) => state.plaints.error;
  const selectSearchBy = (state: IState) => state.plaints.searchBy;
  const selectCountries = (state: IState) => state.plaints.countries;
  let searchBy = useSelector(selectSearchBy);
  let countries = useSelector(selectCountries);
  const error = useSelector(selectError);
  const dispatch: any = useAppDispatch();
  const searchObject = {
    searchBy: searchBy,
    searchParam: searchString,
  };


  const handleCountryChange = (e: any) => {
    console.log(e.target.value);
    setCountry(e.target.value);
    setSearchString(e.target.value);
  };
  const handleChange = async (e: any) => {
    try {
      await dispatch(fetchPlaints(searchObject)).unwrap();
      console.log("success");
    } catch (e: any) {
      await dispatch(setError(true));
      console.log(e.message);
    }

    setSearchString("");
  };
  const handleKeyDown = async (e: any) => {
    const trimmedText = searchString.trim();
    //If the user pressed the Enter key:
    if (e.which === 13 && trimmedText) {
      e.preventDefault();
      console.log("enter pressed");
      console.log(searchString);
      try {
        await dispatch(fetchPlaints(searchObject)).unwrap();
        console.log("success");
      } catch (e: any) {
        console.log(e.message);
        dispatch(setError(true));
      }

      //And clear out the text input
      setSearchString("");

      // setStatus('idle')
    }
  };

  return (
    <Paper
      component="form"
      sx={{ p: "2px 4px", display: "flex", width: 400, border: 'solid red 1px'}}
    >{error ? <Error /> : ""}
      {searchBy === "country" ? (
        <FormControl variant="outlined">
          <InputLabel id="countriesLbl">Countries</InputLabel>
          <Select

          autoWidth 
            MenuProps={{
                       sx: {
                maxHeight: 400,
                maxWidth: 400
              },
              
            }}
            labelId="countriesLbl"
            id="countries"
            value={country}
            label="countriesLbl"
            onChange={handleCountryChange}
          >
            <MenuItem value="">
        <em>None</em>
      </MenuItem>{countries.map((country: ICountry, i: number) => {
              return (
                <MenuItem key={i} value={country.PIC_NAME}  >
                  {country.PIC_NAME}
                </MenuItem>
              );
            })}
          </Select>
        </FormControl>
      ) : (
          <InputBase
            sx={{ ml: 1, flex: 1, maxWidth: 400 }}
            placeholder="Search"
            onChange={(e) => setSearchString(e.target.value)}
            onKeyDown={handleKeyDown}
            value={searchString}
            inputProps={{
              "aria-label": "search database",
            }}
          />
      )}
      <IconButton onClick={handleChange}>
        <SearchOutlined />
      </IconButton>
    </Paper>
  );
};

export default Search;

我在 App.tsx 中获取国家/地区：

import React, {useEffect, useState} from 'react';
import logo from './logo.svg';
import './App.css';
import {Grid} from '@mui/material';
import{ThemeProvider} from "@mui/system";
import TopBar from './components/TopBar';
import SearchResults from './components/SearchResults'
import {theme} from './theme'
import SearchOptions from './components/SearchOptions'
import PlaceDetails from './components/PlaceDetails'
import './components/Table.css'
import {place, places} from './utils/plaints'
import NameVariation from './components/NameVariation'
import Select, { SelectChangeEvent } from '@mui/material/Select'
// import {searchByString} from './functions/search'
import axios, { AxiosResponse } from 'axios'
import Search from './components/Search'
import Archives from './components/Archives';
import { useAppDispatch } from './hooks';
import { fetchCountries } from './features/plaints/plaintsSlice';





function App() {
  const dispatch = useAppDispatch()
  useEffect(() => {
    dispatch(fetchCountries())
    }, []);


// const selectedPlace = searchedPlace
  return (
   <ThemeProvider theme={theme}>
    <TopBar/>
     <Grid container spacing={0.5} justifyContent="center" padding={2.5}>
      <Grid item xs={6} md={2}>
      <SearchOptions/>
      </Grid>
      <Grid item xs={6} md={5}>
      <Search/>
      </Grid>
      </Grid>
    <Grid container spacing={0.5} justifyContent = "left">
    <Grid item xs = {2.5} margin="auto" >
   
        <SearchResults/>
      </Grid>
      <Grid item xs = {2.5} margin="auto">
  
        <PlaceDetails/>
      </Grid>
      <Grid item xs = {2.5} margin="auto">

        <NameVariation/>
      </Grid>
      <Grid item xs = {2.5} margin="auto">
        <Archives/>
      </Grid>
    </Grid>
 </ThemeProvider>
  );
}

export default App;

我尝试禁用我拥有的任何其他 CSS，但没有带来任何东西。 任何想法将不胜感激！