EDITAR: Obsoleto, cometí algún error en otro fragmento de código y los datos recibidos tenían el tipo de datos incorrecto.
Tengo una variable que almacena el índice de un elemento seleccionado. Usé una expresión condicional basada en esa variable para agregar/eliminar un nombre de clase para que dicho elemento se represente de manera distintiva. Reduje el problema a este fragmento:
function App() { const [selectedItem, setSelectedItem] = setState(-1); setSelectedItem(0); console.log(selectedItem); return ( <> {selectedItem !== 0 && <p>no item selected</p>} {selectedItem === 0 && <p>item {selectedItem} selected</p>} </> ); }Este fragmento siempre muestra que no hay ningún elemento seleccionado.
El gancho se llama useState , no setState .
Llamar setSelectedItem dentro de la función de representación activará un bucle infinito. Debe moverlo a un gancho de efectos para que solo ejecute uno.
export default function App() { const [selectedItem, setSelectedItem] = useState(-1); useEffect(() => { setSelectedItem(0); }, []); console.log(selectedItem); return ( <> {selectedItem !== 0 && <p>no item selected</p>} {selectedItem === 0 && <p>item {selectedItem} selected</p>} </> ); }¿Qué es setState ? ¿Te refieres a useState ? Y además, no debe actualizar el estado de esta manera, debe hacerlo en un useEffect y usar una matriz vacía como dependencia, por lo que se ejecutará solo una vez, cuando se monte su componente:
useEffect(() => { setSelectedItem(0); },[])Entonces está funcionando como un encanto.
Reemplace === y !== con == y != , respectivamente, y listo, funciona. Por desgracia, se informa una advertencia de que se debe usar === en su lugar.
selectedItem es una matriz, aparentemente las primitivas hacen malas referencias. Aún así, es extraño hasta cierto punto que dentro de <p> la variable se desbloquee automáticamente, mientras que para evaluar === no lo es y, por lo tanto, una matriz se compara con una primitiva, lo cual no es cierto, sin importar los valores. == compara cada mierda en JS con la que lo alimentas, así que aquí funciona.
Espero que esto le ahorre a alguien 2 horas de depuración.
Si alguien tiene una solución correcta para esto, por favor comparta a continuación.