Tengo un menú desplegable desde el que paso el valor del nombre OnClick
onClick={() => clicked(v.Name)Luego, en el evento en el que se hizo clic, quiero comparar que el valor de entrada no es el mismo que el valor anterior, pero esto falla porque no puedo actualizar oldName después de comparar los valores. Probablemente hay una mejor lógica para esto. También probé UseEffect y UseState pero tendían a actualizarse con los valores anteriores.
función DropdownComponent () {
var oldName; function clicked(Name) { if (Name === oldName) { console.log("Same Clicked!"); } else { console.log("Differet Clicked!"); setTitleName(Name) } return oldName = (Name); //can't update } return ( <Dropdown //dropdown component }Cualquier cosa almacenada en una variable local de componente solo existe para ese renderizado. Cada render volverá a declarar la variable. Entonces esta variable:
var oldName; Siempre estará undefined en cada render. Las variables locales de componentes pueden ser útiles para el almacenamiento temporal. Por ejemplo, puede realizar una lógica de clasificación/filtrado en una matriz y almacenar los resultados en variables con el fin de asignar esas variables a los componentes de la interfaz de usuario en el procesamiento, separando efectivamente la lógica de clasificación/filtrado de la lógica de representación.
Pero esas variables no persisten en los renderizados.
Si desea que algo se conserve en los renderizados, debe mantenerlo en estado. Lo que parece que ya estás haciendo aquí:
setTitleName(Name)El código que se muestra no incluye esto, pero presumiblemente en algún lugar estás creando un valor de estado como este:
const [titleName, setTitleName] = useState('');Si asumimos que este "nombre del título" es un valor de estado, entonces ya tiene el "valor anterior", es el que está manteniendo en estado. Así que solo compruébalo con ese:
function clicked(name) { if (name === titleName) { console.log("Same Clicked!"); } else { console.log("Differet Clicked!"); setTitleName(name); } }