Soy bastante nuevo en reaccionar y me preguntaba cuál era la forma correcta de inicializar variables de estado vacías en reaccionar. Actualmente tengo un formulario en mecanografiado que tiene varios campos para completar. La mayoría de esos campos son menús desplegables y he inicializado algunos datos estáticos como una matriz de objetos como este.
export const options = [ { id : 0, name : "Setting 1" }, { id : 1, name : "Setting 2" }, { id : 2, name : "Setting 3" } ];Entonces puedo mostrar estas opciones en el menú desplegable del formulario y todo funciona como se esperaba. El problema surge cuando intento inicializar el estado que estoy usando para verificar las actualizaciones en este campo.
const [myForm, setMyForm] = React.useState({ dropdown : options[0], dropdown1 : options1[0] }); Entonces, para mí, en el objeto myForm que he certificado para realizar un seguimiento del estado, obtengo la primera opción de forma predeterminada como seleccioné como especifiqué. No puedo inicializarlo en null ya que TypeScript requiere un tipo para cualquier declaración. ¿Cuál es la mejor práctica para tener inicialmente el valor como un objeto vacío y configurarlo más tarde cuando el usuario marca la opción en el menú desplegable? Porque si lo configuro en un objeto vacío como {} en las options , no puedo acceder a los campos de id y name en el código. Alguien me puede decir cual es la forma correcta de hacerlo
useState puede tomar un tipo. Esto es bueno para cuando Typescript no puede inferir el tipo del tipo del valor inicial. Este suele ser el caso con cualquier valor predeterminado null . Debe indicarle a TypeScript cuál podría ser el valor cuando no es null .
Por ejemplo:
const [name, setName] = useState<string | null>(null) // name is of type: string | null if (name != null) console.log(name.toUpperCase())No sigo completamente su código aquí, pero creo que es posible que desee establecer el tipo de su estado de esta manera, con un valor opcional. Esto significa que se permite que falte o no esté definido.
interface State { dropdown: FormField dropdown1: FormField } interface FormField { id: number name: string value?: string }Y luego usa ese tipo:
const [myForm, setMyForm] = React.useState<State>({ dropdown : options[0], dropdown1 : options1[0] }); myForm.dropdown.name // allowed, and type is: string | undefined