Aqui está o problema: estou tentando chamar duas funções com um clique de botão. Ambas as funções atualizam o estado (estou usando o gancho useState). A primeira função atualiza o valor1 corretamente para 'novo 1', mas após 1s (setTimeout) a segunda função é acionada e altera o valor 2 para 'novo 2' MAS! Ele define o valor1 de volta para '1'. Por que isso está acontecendo? Desde já, obrigado!
import React, { useState } from "react";
const Test = () => {
const [state, setState] = useState({
value1: "1",
value2: "2"
});
const changeValue1 = () => {
setState({ ...state, value1: "new 1" });
};
const changeValue2 = () => {
setState({ ...state, value2: "new 2" });
};
return (
<>
<button
onClick={() => {
changeValue1();
setTimeout(changeValue2, 1000);
}}
>
CHANGE BOTH
</button>
<h1>{state.value1}</h1>
<h1>{state.value2}</h1>
</>
);
};
export default Test;
useState
ou use useReducer
.
const [state, ...]
e, em seguida, referindo-se a ele no levantador ... Ele usará o mesmo estado o tempo todo.
useState
chamadas separadas , uma para cada "variável".
changeValue2
?