React Js componentDidMount Ajax Call setstate не обновляет состояние

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.

Leela Venkatesh K 22.11.2018 09:20

Добавьте точку останова в свой успех и войдите в свой код. Как только вы достигнете точки останова, войдите в вызов функции и посмотрите, что происходит.

Luke Walker 22.11.2018 09:23

"let prevState = [... this.state.league.teams];". Разве это не должно быть "let prevState = {... this.state.league.teams};" (обратите внимание на фигурные скобки)

Anton Pastukhov 22.11.2018 10:21
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
3
258
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Подозреваю, что есть две части проблем.

Сначала setState в 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
               }
            });
        });

Во-вторых, я предполагаю, что есть некоторые ошибки в дате renderTeamsHandler.Fetch и установите их в команде, но используйте группу в renderTeamsHandler. И группа в состоянии.

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

Другие вопросы по теме