The setState is not working

Question

I’ve seen several posts about it, but none even agr helped me much...

When it gives the console.log(this.state.list); the resulate is undefined... and I’m sure the data is coming from the API. Can someone help me?

  super(props)
    this.state = {
       lista: []
    }
}

  async componentDidMount() {
    const url = "https://api.api-futebol.com.br/v1/campeonatos/10/tabela";
    return fetch(url, {
      headers: new Headers({
        Authorization: "Bearer test_34g2irhefu2h2rf92hr"
      })
      
    })
    .then(response => response.json())
      .then(response => {
        this.setState({
          lista: response.lista
        }),
        console.log(this.state.lista);
      })
      .catch(error => {
        console.error(error)
      });
    
  }
render() {
    return (<div>
          <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
          />
          <Table>
            <thead>
              <tr>
                <th />
                <th>Time</th>
                <th>P</th>
                <th>J</th>
                <th>V</th>
                <th>E</th>
                <th>D</th>
                <th>Recentes</th>
              </tr>
            </thead>
            <tbody>
              {this.state.lista && this.state.lista.map(infos => {
                return (
                  <tr>
                    <td>
                      <img src={infos.time.escudo} style={{ width: "28px" }} />
                    </td>
                    <td>
                      <font
                        color={this.posicao(infos.posicao, this.teste.length)}
                      >
                        {infos.time.nome_popular}
                      </font>
                    </td>
                    <td>{infos.pontos}</td>
                    <td>{infos.jogos}</td>
                    <td>{infos.vitorias}</td>
                    <td>{infos.empates}</td>
                    <td>{infos.derrotas}</td>
                    <td>
                      {this.recente(infos.ultimos_jogos[0])}
                      {this.recente(infos.ultimos_jogos[1])}
                      {this.recente(infos.ultimos_jogos[2])}
                      {this.recente(infos.ultimos_jogos[3])}
                      {this.recente(infos.ultimos_jogos[4])}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </Table>
        </div>
      </>

Answer 1

The setState is asynchronous... when you invoke this.setState(... change is not immediate. This is the React paradigm, never assume it is immediate (asynchronous). Prepares the code for "empty" values to then change when the values "arrive".

The setState, allows a second argument: a callback, which runs afterward the state has changed. Then you can put that console.log.

Test this code, and reflect on how it works considering what I’ve written here:

console.log('A', resposta.lista.length); // preenchido
this.setState({
  lista: response.lista
}, () => console.log('B', this.state.lista.length)) // preenchido
console.log('C', this.state.lista.length); // vazio