React Js componentDidMount Ajax Call setstate does not update state

Question

import React, { Component} from 'react';
import { Route } from 'react-router';
import axios from 'axios';

class App extends Component {
   constructor(props) {
      super(props);
      this.state = {
         league: {
            teams: {
               data: [],
               loaded: false,
               config: {
                  icon: true,
                  parentId: 'leftSideTreeView'
               }
            },
            players: {
               data: [],
               loaded: false,
               config: {
                  icon: true,
                  parentId: 'leftSideTreeView'
               }
            },
            games: {
               data: [],
               loaded: false,
               config: {
                  icon: true,
                  parentId: 'leftSideTreeView'
               }
            },
            error: false
         }
      };
   }

   componentDidMount() {
      this.getTeamsHandler();
   }

   getTeamsHandler = () => {
      axios.get('/api/League/GetTeams')
      .then((response) => {
         let prevState = [...this.state.league.teams];
         prevState.data = response.data;
         prevState.loaded = true;
         this.setState({ teams: prevState });
      })
      .catch((error) => {
         this.setState({ error: error });
      });
   }

   renderTeamsHandler = () => {
      let games = this.state.league.games;
      let content = null;
      if (games.data.length > 0) {
         content = games.data.map((team, index) => {
            return <div key={index}>{team.teamName}</div>;
         });
      }
      return content;
   }

   render() {
      let Team = this.renderTeamsHandler();
      return (
         <div>
            {Team}
         </div>
      );
   }
}

export default App;

The Ajax call does set data to prevState.Data but by the time it gets to rendering it, the state is the same as before the Ajax call. It is very confused as this all looks correct to me. Is it potentially async issue? If that is the case, why previously what I've done calls like this and had no issue at all.

Thanks for any help in advance.

Answer 1

I suspect that there are two part of problems.

First,the setState in getTeamsHandler:

axios.get('/api/League/GetTeams')
        .then((response) => {
            let prevTeam = [...this.state.league.teams];
            prevTeam.data = response.data;
            prevTeam.loaded = true;
            this.setState(prevState => ({
                league: {
                  ...prevState.league,
                  teams: prevTeam
                }
            })
        })
        .catch((error) => {
            this.setState(prevState => ({
               league: {
                 ...prevState.league,
                 error: error
               }
            });
        });

Second,I guess there are some mistakes in renderTeamsHandler.Fetch date and set them in team, but use group in renderTeamsHandler.And the group in state is .

renderTeamsHandler = () => {
    let teams = this.state.league.teams;
    let content = null;
    if (teams.data.length > 0) {
        content = teams.data.map((team, index) => {
            return <div key={index}>{team.teamName}</div>;
        });
    }

    return content;
}