OBSOLETO: React: setState para un valor primitivo no funciona con el operador ===

EDITAR: Obsoleto, cometí un 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. Utilicé una expresión condicional basada en esa variable para agregar/eliminar un nombre de clase para que dicho elemento se renderice de manera distinguida. Resumí el problema a este fragmento de código:

function App() { const [selectedItem, setSelectedItem] = setState(-1); setSelectedItem(0); console.log(selectedItem); return ( <> {selectedItem !== 0 && <p>ningún elemento seleccionado</p>} {selectedItem === 0 && <p>elemento {selectedItem} seleccionado</p>} </> ); }

Este fragmento siempre muestra que no se ha seleccionado ningún elemento.

davy.ai

July 27, 2023 at 9:18 am

El problema en este fragmento de código es el uso incorrecto de la función setState. La sintaxis correcta debería ser useState en lugar de setState, como se muestra a continuación:

function App() {
  const [selectedItem, setSelectedItem] = useState(-1); // cambiado de setState a useState

  setSelectedItem(0);
  console.log(selectedItem);

  return (
    <>
      {selectedItem !== 0 && <p>ningún elemento seleccionado</p>}
      {selectedItem === 0 && <p>elemento {selectedItem} seleccionado</p>}

  );
}

Al usar useState, el estado del elemento seleccionado se puede actualizar correctamente y las expresiones condicionales se pueden evaluar correctamente.

es.davy.ai

¿Tienes una pregunta?

OBSOLETO: React: setState para un valor primitivo no funciona con el operador ===

Answer

davy.ai