-2

Eu não sei pq, mas quando eu tento fazer uma requisição pro meu backend, o estado de "posts" não recebe o valor de response.data. Ou seja os dois "console.log" possuem valores diferentes, enquanto o response.data está correto o segundo retorna um array vazio. O que pode ser?

const [posts, setPosts] = useState([]);

useEffect(() => {
    async function postLoader() {
        const response = await api.get('/posts');
        setPosts(response.data);
        console.log(response.data);
        console.log(posts);
    }

    postLoader();
}, []);

"devDependencies": {
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-react": "^7.19.0",
    "eslint-plugin-react-hooks": "^2.5.1",
    "prettier": "^2.0.5"
  }
"dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.2",
    "bootstrap": "^4.5.0",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1"
  },

import axios from 'axios';

const api = axios.create({
    baseURL: 'http://localhost:3333',
});

export default api;
1
  • Qual é o problema exatamente? Imagino que seu problema não esteja no código mostrado. O valor de um estado só é atualizado após re-renderizar o componente, ele não vai mudar dentro do useEffect 17/05/2020 às 20:15

2 Respostas 2

1

setPosts(response.data); é um método assíncrono, isso significa que o novo estado não é setado instantaneamente. Quando o método console.log(posts) é chamado, o valor do seu estado ainda não foi alterado, dando a impressão de que não está sendo setado o novo valor.

Para printar o novo valor, use o hook useEffect e passando no array de dependências a sua variável posts. Dessa forma, assim que o estado for alterado, ela terá o novo valor printado:

useEffect(() => {
    console.log(posts)
}, [posts]);
0

1. Retire a função postLoader() de dentro do useEffect(()=>{},[]), por questão de legibilidade;

2. O método setPosts e qualquer um que venha do useState(), não atualiza imediatamente, ou seja isso faz com que mesmo que você faça setPosts(response.data); e em seguida o console.log(posts) a variavel posts ainda não estará atualizada, pois isso demora um pouquinho mais.

3. Recomendo que faça assim:

const [posts, setPosts] = useState([]);
useEffect(()=>{
    console.log(posts)
},[posts]) //passar a variavel 'posts' aqui fará com que este useEffect execute somente quando 'posts'  trocar de valor, ou seja um 'console.log()' aqui sempre exibirá correto.

useEffect(() => {    
    await postLoader();
}, []);`

async function postLoader() {
    const response = await api.get('/posts');
    setPosts(response.data);
    console.log(response.data);
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .