Estoy mostrando una lista que busco desde el backend, que usa ints como ids:
const events = [ { id: 1, name: "Event 1" }, { id: 2, name: "Event 2" } ];En la interfaz de usuario, puedo seleccionar un evento o no tengo ningún evento seleccionado. Prefiero mantener el mismo tipo para el evento seleccionado y sé que mi base de datos no generará identificaciones negativas para sus filas. Así que uso una convención común de -1 como evento inicial/no seleccionado:
const selectedEvent = useState<number>(-1)Ahora, quiero agregar un evento de Inicio y Fin a la lista de eventos, que son objetos "similares a eventos", que no obtuve de la misma tabla de base de datos. Necesito asignarles una identificación.
Es posible que el DB utilice números positivos. Me mantendré alejado de cero por otras razones**. Así que se me ocurren índices negativos a partir de -2:
const events = [ { id: -2, name: "Start Event", payload: "ABC" }, ...events, { id: -3, name: "End Event", payload: "XYZ" } ];Esto funciona bien, solo me pregunto, ¿es esta una convención de uso común? ¿Otros desarrolladores, o yo en el futuro, entenderán este código o se tirarán de los pelos si ven esto? Si no es la mejor manera de avanzar, ¿cuál es? (Como puede ver, estoy trabajando con una base de código javascript / typescript, por lo que si importa, se trata específicamente de este ecosistema)
** No estoy 100% seguro de que todos los DB no comiencen índices numéricos con 0. Solo hay un 0 y necesito dos ID. 0 es falso en javascript, lo que puede causar algunos problemas en el camino. Para resumir, me saltaré cero :)
Editar: para responder a algunos de los comentarios:
declare type Event = { id: number; name: string; payload: string; }; declare type StartOrEnd = { id: number; name: string; isStart: boolean; }Sin embargo , el usuario desea navegar por los eventos, así como por el inicio y el final como un evento. Esto no es ideal desde la perspectiva del tipo, pero aquí es donde tendré que ceder un poco, de una forma u otra. Mi interfaz de usuario simplemente toma un objeto y necesita que tenga una identificación y un nombre:
interface Props { id: number; name: string; selectEvent: (id: number) => void; } const renderEvent = ({id, name, selectEvent}) => { return ( <div onClick={() => selectEvent(id)}>{name}</div> ) }