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;

Ajax调用确实将数据设置为prevState.Data，但是到呈现它时，其状态与Ajax调用之前的状态相同。这很困惑，因为这一切对我来说都是正确的。是否可能是异步问题？如果是这样，为什么以前我所做的这样的调用完全没有问题。

感谢您的任何帮助。

Answer 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中存在一些错误。获取日期并将其设置在团队中，但是在renderTeamsHandler中使用group。状态为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;
}

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

1 个答案: