reactjs - como obter o estado imediatamente após a mudança de estado em hooks do React
Oi pessoal, não consigo obter o estado atual após configurar o estado. Estou chamando uma função onde estou passando esse estado, mas sempre estou obtendo o estado padrão nessa função. este é o meu estado-
const [currentValue , setCurrentValue] = useState(one[0]); // where one[0] is string "Test"
esta é a minha função onchange -
const getTest = useCallback((newValue:string) => {
setCurrentValue({
label:newValue,
value:newValue
});
getCurrentValue(currentValue.value);
getSortOrder()
}, [])
esta é a minha função getSortOrder -
const getSortOrder =() => {
console.log(currentValue);
}
Não estou recebendo o estado atualizado na função getSortOrder e na função getCurrentValue. Mas sim, se eu tentar mostrar o estado no console dentro do render, ele mostra o estado atualizado, mas na função ele não está atualizando. Como posso conseguir o estado atualizado em ambas as funções?
Resposta #1
Se eu entendi sua pergunta corretamente, então isso pode ajudar:
const getTest = useCallback((newValue:string) => {
setCurrentValue({
label:newValue,
value:newValue
});
//try this code doing in useEffect
}, [])
useEffect(() => {
getCurrentValue(currentValue.value);
getSortOrder()
},[currentValue]); //Everytime currentValue changes it will give new state
Resposta #2
Isso está acontecendo porque a função 'setCurrentValue' é uma função assíncrona e o estado é atualizado depois que ambas as funções 'getCurrentValue' e 'getSortOrder' terminaram sua execução.
Uma solução fácil será passar o parâmetro 'newValue' para ambas as funções assim:
const getTest = useCallback((newValue:string) => {
setCurrentValue({
label:newValue,
value:newValue
});
getCurrentValue(newValue);
getSortOrder(newValue)
}, [])
const getSortOrder =(newValue) => {
console.log(newValue);
}
Ou você pode usar a funcionalidade 'useEffect' para acionar as funções após o valor do estado ter sido atualizado assim:
const getTest = useCallback((newValue:string) => {
setCurrentValue({
label:newValue,
value:newValue
});
}, [])
useEffect(() => {
getCurrentValue();
getSortOrder()
},[currentValue]);
