Estoy en el proceso de aprender React: tengo un problema en el que los valores cuando se ejecutan devoluciones condicionales parecen aún visibles en la pantalla.
Ejemplo: vaya al botón de la habitación, seleccione una habitación y un usuario, luego vaya al botón de usuario o al botón de ubicación y los valores aún parecen estar visibles/seleccionados, aunque no lo están.
Había visto una publicación similar a esta, sin embargo, parecía que no podía hacer que funcionara. He intentado resetForm() setFieldValue
He creado un codesandbox con lo que estoy usando a continuación. Puede haber una mejor manera de hacer esto también...
https://codesandbox.io/s/floral-leftpad-vhfi0
¡Agradecería cualquier comentario/sugerencia o consejo sobre qué o dónde me estoy equivocando!
Gracias,
El valor de su selección debe ser null si desea restablecerlo. En su caso, podría estar undefined , porque encuentra el valor y, si no encuentra nada, estaría undefined aquí.
value={ props.options ? props.options.find((option) => option.value === field.value) : null || "" } Podría codificar así para hacer que el value sea null :
let value = null; if (props.options) { value = props.options.find((option) => option.value === field.value) || null; } return ( <div style={{ width: props.width }}> <Select {...field} {...props} name={field.name} isSearchable="true" isClearable="true" value={value} onChange={(option) => { if (option) { setFieldValue(field.name, option.value); } else { setFieldValue(field.name, 0); } }} onBlur={field.onBlur} /> </div> );Échale un vistazo: https://codesandbox.io/s/infallible-fire-68m1m?file=/src/CustomSelect.js