0
239
ViewsCómo mostrar la opción elegida | Autocompletar interfaz de usuario de material
Estoy obteniendo datos de una API como opciones en Material UI Autocompletar, las opciones se obtuvieron correctamente, pero el problema es que cuando elijo una opción y la envío de vuelta a la API (POST), la opción (categoría) no se muestra como texto que muestra como un número (0) como se muestra en la imagen de abajo (Mongodb) 
import Autocomplete from '@mui/material/Autocomplete'; import TextField from '@mui/material/TextField'; export default function Write() { const [categories, setCategories] = useState(""); const handlerSubmit = async (e) => { e.preventDefault(); const newPost = { username: user.username, title, categories, } if (file) { try { } catch (err) { } } try { const res = await axios.post("/posts", newPost); } catch (err) { } } useEffect(() => { const getCats = async () => { const res = await axios.get("/categories"); setCategories(res.data); }; getCats(); }, []); return ( <div className='write'> <form className="writeForm" onSubmit={handlerSubmit}> <input className="writeTitleInput" required type="text" placeholder="title" autoFocus={true} onChange={e => setTitle(e.target.value)}> </input> <Autocomplete multiple limitTags={3} id="tags-standard" options={categories} getOptionLabel={option => (option.name ? option.name : "")} onChange={(e) => setCategories(e.target.value)} renderInput={(params) => ( <TextField {...params} variant="standard" label="Multiple values" placeholder="Choose a Category" /> )} /> <button className="writeSubmitButton" type="submit">Publish</button> </form> </div> ) }La pregunta es cómo mostrar la opción elegida como una cadena, no como una matriz.
1 answers
Answer question0
Según los documentos , la firma de onChange para Autocomplete es
function( event: React.SyntheticEvent, value: T | Array<T>, reason: string, details?: string) => void Está esperando que el valor esté en event , cuando en realidad está en value . Modifique su devolución de llamada onChange a algo como lo siguiente:
onChange={(_, value) => setCategories(value)} Es posible que el value no tenga la forma que espera su API, por lo que debe intentar usar console.log en la devolución de llamada para determinar su forma y luego modificar lo anterior de manera adecuada.
el value es Array<T> cuando se establece multiple , por lo que probablemente también debería tener su valor predeterminado para las categories establecidas en el mismo tipo, es decir, una matriz vacía ( [] ) en lugar de una cadena vacía ( "" ).