我有一个Autocomplete
分量显示的状态array.但当我 Select 一个状态时,我应该呈现一个依赖于所选状态的组件.
不会呈现任何内容,但会在代码中 Select 状态.
该组件如下所示
import { Autocomplete, TextField } from '@mui/material';
import styles from './/styles.module.css';
import { useState } from 'react';
type JSXElement = any;
const statesString = [
'Acre',
'Alagoas',
'Amazonas',
'Brasília Distrito Federal',
'Ceará',
'Espírito Santo',
'Goiás',
'Maranhão',
'Mato Grosso',
'Mato Grosso do Sul',
'Minas Gerais',
'Pará',
'Paraíba',
'Paraná',
'Pernambuco',
'Piauí',
'Rio de Janeiro',
'Rio Grande do Norte',
'Rio Grande do Sul',
'Roraima',
'Santa Catarina',
'São Paulo',
'Sergipe',
'Tocantins',
];
const locations = [
{
name: 'Acre',
locations: [
{
name: 'Aeroporto de Rio Branco',
address:
'Avenida Plácido de Castro – Vila Aeroporto – Rio Branco CEP: 69923-900 AC Telefone: 68-3211-1000',
lat: -9.98417,
lng: -67.88333,
},
],
},
];
export default function SearchBar() {
const [selectedState, setSelectedState] = useState('');
function renderSelectedStateWithMap(stateName): JSXElement {
console.log(stateName);
locations.map((state) => {
console.log('state', state);
if (state.name === stateName) {
state.locations.map((location) => {
return (
<div className={styles.selectedStateContainer}>{location.name}</div>
);
});
}
return <></>;
});
}
return (
<div className={styles.searchBarContainer}>
<Autocomplete
disablePortal
onChange={(event: any, newValue: string | null) => {
setSelectedState(newValue);
}}
id="combo-box-demo"
options={statesString}
sx={{ width: 300 }}
renderInput={(params) => (
<TextField {...params} label="Escolha o Estado" />
)}
/>
{renderSelectedStateWithMap(selectedState)}
</div>
);
}
即使map()
发现状态,renderSelectedStateWithMap
也不返回<div>
.