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

【问题标题】：React Js componentDidMount Ajax Call setstate does not update stateReact Js componentDidMount Ajax调用setstate不更新状态
【发布时间】：2018-11-22 08:04:06
【问题描述】：

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 调用之前的状态相同。这很困惑，因为这一切对我来说都是正确的。它是潜在的异步问题吗？如果是这样的话，为什么以前我做过这样的调用并且根本没有问题。

提前感谢您的帮助。

【问题讨论】：

我认为这是因为您在 state.teams 而不是 state.league.teams 上设置值。
在你的成功中添加一个断点并进入你的代码。一旦你在函数调用中达到你的断点步骤，看看发生了什么。
"让 prevState = [...this.state.league.teams];"。不应该是“让 prevState = {...this.state.league.teams};” （注意花括号）

标签： reactjs reactjs.net

【解决方案1】：

我怀疑有两部分问题。

首先，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和group里面设置有错误，但是在renderTeamsHandler中使用group。而且state中的group是.

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

【讨论】：