Pesquisa de site

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]);

Artigos relacionados