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. Это очень сбивает с толку, поскольку мне все это кажется правильным. Это потенциально асинхронная проблема? Если это так, то почему раньше то, что я делал, называлось вот так, и никаких проблем не возникало.
Спасибо за любую помощь заранее.
Добавьте точку останова в свой успех и войдите в свой код. Как только вы достигнете точки останова, войдите в вызов функции и посмотрите, что происходит.
"let prevState = [... this.state.league.teams];". Разве это не должно быть "let prevState = {... this.state.league.teams};" (обратите внимание на фигурные скобки)





Подозреваю, что есть две части проблем.
Сначала 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;
}
Я думаю, это потому, что вы устанавливаете значение в state.teams вместо state.league.teams.