Retornando valor de uma função em react

Question

Quando estou tentando retornar meu res.data da minha função e, em seguida, console.log, fico indefinido, mas se eu console.log de dentro da função, obtenho o resultado normal

const getDefaultState = () => {
  axios
    .get("http://localhost:5000/urls/todos")
    .then((res) => {
      if (res.data) {
        console.log(res.data);
        return res.data;
      }
    })
    .catch((err) => console.log(err));
};


console.log(getDefaultState());

então eu pego primeiro

(3) [{…}, {…}, {…}]

(o valor normal), mas de fora eu recebo

Indefinido

Answer 1

Você também precisa retornar a ligação:

const getDefaultState = () => {
  return axios.get("http://localhost:5000/urls/todos")
        .then((res) => {
           if (res.data) {
              console.log(res.data);
              return res.data;
           }
  }).catch((err) => console.log(err));
}

Answer 2

Você deve devolver a promessa em vez disso.

const getDefaultState = () =>
  axios
    .get("http://localhost:5000/urls/todos")
    .then((res) => {
      if (res.data) {
        console.log(res.data);
        return res.data;
      }
    })
    .catch((err) => console.log(err));

Dessa forma, você pode ouvir o resultado fora da função:

getDefaultState().then(/* do stuff */);
// or
const res = await getDefaultState();