Digamos que tengo el siguiente estado declarado en mi componente React:
const [selectedUsers, setSelectedUsers] = useState<IUser['id'][]>(); Dicho estado se utiliza como valor para un HTML <select /> de terceros ( Ant Design ).
Después de que termine de usar <select /> , me gustaría borrarlo, lo cual puedo hacer fácilmente al establecer el valor como null o undefined .
P.ej:
setSelectedUsers(null); <select value={selectedUsers} /> // Is now null, no option is selected Sin embargo, no puedo pasar null como el valor de <select /> debido a los accesorios de TS esperados en el componente de selección, ya que espera recibir <IUser['id'][] | undefined> .
Es decir:
Type 'null' is not assignable to type 'string[] | undefined'. Dado el contexto anterior, ¿hay algún problema con pasar undefined al estado React?
Es decir:
setSelectedUsers(undefined); Esta es una pregunta sobre las mejores prácticas, ya que el código anterior funciona perfectamente si uso undefined en lugar de null .
Simplemente páselo [] as string[]
setSelectedUsers([] as string[]);
Deberias hacer eso.
Editado para incluir las cosas en los comentarios:
La forma en que se redactó la pregunta original que está escribiendo es una matriz de un elemento, esto debe definirse como:
const [selectedUsers, setSelectedUsers] = useState<string[]>();Entonces, la solución anterior funcionará.
Pasar undefined como un valor a setState está perfectamente bien. El valor del estado, en su caso, selectedUsers , puede ser de cualquier tipo de JavaScript.
undefined es un "valor primitivo" en JavaScript y, por lo tanto, un tipo regular. Obtenga más información sobre los tipos de JavaScript aquí: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#javascript_types
El tipo y el constructor deben ser
const [selectedUsers, setSelectedUsers] = useState<[IUser['id']] | null>(null); si desea que null sea el valor nulo. ( undefined funciona implícitamente ya que no pasa en un estado inicial, ya que está implícitamente undefined ).
Sin embargo, si desea poder seleccionar varios valores, probablemente esté buscando
const [selectedUsers, setSelectedUsers] = useState<Array<IUser['id']> | null>(null);