0
113
Vistas<select> debe tener {defaultValue} o {value} en lugar de configurar {selected}
Estoy construyendo un sitio de comercio electrónico con reactjs con componente con estilo. Mi página product.jsx que tiene el elemento <select> con diferentes tamaños de producto [XS,S,M,L,XL] que causa el error siempre muestra este error al renderizar en console.dev:
Advertencia: use el
valuedefaultValueo las propiedades de valor en lugar de la configuraciónselecteden .
Probé este código justo debajo antes, pero no funciona como se esperaba. Espero mostrar el primer elemento como deshabilitado y no debería seleccionarse en absoluto:
<Filter> <FilterTitle>Size</FilterTitle> <FilterSize onChange={(e) => setSize(e.target.value)}> {product.size?.map((s) => ( <FilterSizeOption key={s}>{s}</FilterSizeOption> ))} </FilterSize> </Filter>Por favor, ayúdame a corregir este código a continuación, no el anterior.
código de producto.jsx :
const FilterSize = styled.select` margin-left: 10px; padding: 5px; cursor: pointer; outline: 0px; font-size: inherit; `; const FilterSizeOption = styled.option``; //... <Filter> <FilterTitle>Size</FilterTitle> <FilterSize onChange={(e) => setSize(e.target.value)}> <FilterSizeOption selected={true} disabled="disabled"> Choose a size: </FilterSizeOption> {product?.product?.size.map((s) => ( <FilterSizeOption key={s} value={s}> {s} </FilterSizeOption> ))} </FilterSize> </Filter>1 Respuestas
Responde la pregunta0
Para resolver este error, necesita cambiar value="default" en lugar de selected={true} , y en el componente FilterSize debe agregar defaultValue="default" . El valor predeterminado y el valor con el mismo valor, vinculará la selección predeterminada. El valor predeterminado puede cambiar el nombre usted mismo.
Antes
Después
const FilterSize = styled.select` margin-left: 10px; padding: 5px; cursor: pointer; outline: 0px; font-size: inherit; `; const FilterSizeOption = styled.option``; const sizes = ['XS', 'S', 'M', 'L', 'XL']; function App() { const [size, setSize] = useState(); return ( <> <FilterSize defaultValue="default" onChange={e => setSize(e.target.value)}> <FilterSizeOption value="default" disabled="disabled"> Choose a size: </FilterSizeOption> {sizes.map(s => ( <FilterSizeOption key={s} value={s}> {s} </FilterSizeOption> ))} </FilterSize> </> ); } export default App;