React Js componentDidMount Ajax 调用setstate不更新状态

React Js componentDidMount Ajax Call setstate does not update state

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;

Ajax 调用确实将数据设置为 prevState.Data,但在渲染它时,状态与 Ajax 调用之前相同。这让我很困惑,因为这一切对我来说都是正确的。它可能是异步问题吗?如果是这样的话,为什么我以前做的都是这样调用,一点问题都没有。

提前感谢您的帮助。

我怀疑有两部分问题。

首先,getTeamsHandler中的setState:

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

其次,我猜想 renderTeamsHandler.Fetch date 中有一些错误并在 team 中设置它们,但是在 renderTeamsHandler.And 中使用 group in state 是 .

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;
}