2
# Es ist meine übergeordnete Komponente Ich habe die Aktion von untergeordneten Komponenten und Statusänderungen, aber die Funktion der übergeordneten Komponente nicht aufgerufen wird.Status ändert sich aber Ruft Funktion der übergeordneten Komponente nicht
In Kind Komponente jedes Mal, wenn ich auf Checkbox klicken dann versende ich die Aktion für den Zustand, in Minderer Aktualisierung und ich erhielt neuen Zustand in mapStatetoprop aber nicht aktualisiert die Benutzeroberfläche
const propTypes = {
teamPlayers : PropTypes.array.isRequired,
matchesData: PropTypes.object.isRequired,
isfetchingTeamPlayer: PropTypes.bool.isRequired
};
class CreateTeam extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedPlayerIDs : [],
count:0,
isforward:false,
show:false,
message:''
}
this.toggleChecked = this.toggleChecked.bind(this);
this.forwardRoute = this.forwardRoute.bind(this);
this.previousRoute = this.previousRoute.bind(this);
}
componentWillMount() {
this.props.createTeam(this.props.matchID);
}
renderPlayerCard() { console.log(this.props.teamPlayers)
let count = 0;
return this.props.teamPlayers.map((player) => {
if(player.isChecked){
count+=1;
}
let mtype = '';
return (
<PlayerCard
key={player.id}
player={player}
mtype={mtype}
count={count}
selectedPlayerIDs={this.state.selectedPlayerIDs}
triggerChanges={this.toggleChecked}
/>
);
})
}
render() {
if(!this.props.isfetchingTeamPlayer && !this.props.isPlayersFetching){
return <h1>Loading...</h1>;
}
console.log("selected5Players"+this.props.selected5Players)
return(
<div>
<div className="card">
<div className="container-grey">
<div className="timer2">
<table className="timer-table2">
{
this.props.matchesData.end_time ?
<Counter
endDate={this.props.matchesData.end_time}
/> : null
}
</table>
</div>
<table className="team-table2">
<tr className="match-team">
<td className='team-logo-box'>
<div className="white-box">
{
this.props.matchesData.hasOwnProperty('teams') ?
<img className="team-logo2" alt="Team1"
src={this.props.matchesData.teams.home_team.flag_path}/>
:null
}
</div>
</td>
<td className="team-name2 left">{this.props.matchesData.teams.away_team.short_name}</td>
<td><img className="versus2" alt="versus" src={vs}/></td>
<td className="team-name2 right">{this.props.matchesData.teams.away_team.short_name} </td>
<td className='team-logo-box'>
<div className="white-box">
<img className="team-logo2" alt="Team2"
src={this.props.matchesData.teams.away_team.flag_path}/>
</div>
</td>
</tr>
</table>
</div>
<div className="player-list">
<table className="timer-table2">
<tbody>
{this.renderPlayerCard()}
</tbody>
</table>
</div>
</div>
<div className="foot-container">
</div>
</div>
);
}
}
CreateTeam.propTypes = propTypes;
const mapStateToProps = (state,ownProps) => {
// I am getting updated state here but doesn't call the render function//
console.log("state Changes but does not call the render function of this component")
return {
matchID: ownProps.params.teamID,
selected5Players: state.matchesTeam.selected5Players,
teamPlayers: selectedCheckedplayers(state),
matchesData: state.matchesTeam.matchesData,
isfetchingTeamPlayer: state.matchesTeam.isfetchingTeamPlayer,
isPlayersFetching: state.matchesTeam.isPlayersFetching
}
};
Unterhalb der Code der Kinder Komponente, wo ich die Aktion Versand
hier i auf jedem Kästchen die Aktion Dispatching (handleChange() Funktion) siehe unten
const propTypes = {
player: PropTypes.object.isRequired,
};
class PlayerCard extends React.Component {
handleChange(evt,id,isSelected) {
this.props.togglePlayersChecked({"player":this.props.player,"status":!isSelected})
}
render() {
return (
<tr>
<td className="batsmen-pic">
<img alt='batsmen' className='batsmen-picture' src={this.props.player.photo_url} />
</td>
<td className="batsmen-details">
<div className="batsmen-name left">
<div className="first-name">{this.props.player.name}</div>
</div>
</td>
<td className="batsmen-checkbox-holder">
<div>
<input className="batsmen-checkbox"
type="checkbox"
onChange={event => this.handleChange(event, this.props.player,this.props.player.isChecked)}
value={this.props.player.id}
checked={this.props.player.isChecked }
/>
</div>
</td>
</tr>
);
}
}
PlayerCard.propTypes = propTypes;
const mapStateToProps = (state,ownProps) => ({
selected5Players: state.matchesTeam.selected5Players,
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
togglePlayersChecked
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(PlayerCard);
unter dem Code der Reducer Funktion dieser Aktion
const createTeamReducer = createReducer({
[createTeam]: (state) => ({
...state,
isfetchingTeamPlayer: true,
}),
[createTeam.error]: (state, error) => ({
...state,
teamPlayerError: error,
isfetchingTeamPlayer: false,
isPlayersFetching:true
}),
[createTeam.success]: (state, payload) => {
const teamPlayers = normalize(payload.players);
const matchesData = {...payload.match_data};
const isSaved = true;
return { ...state,matchesData, teamPlayers, isSaved ,isRefreshingTeamPlayer: false };
},
[togglePlayersChecked]: (state, payload) => { console.log(payload)
let teamPlayers = state.teamPlayers;
const isSaved = false;
let selected5Players = state.selected5Players;
if (payload.status) {
if (selected5Players.length >= 5){
//alert("You can't select more then five");
return { ...state, teamPlayers,selected5Players};
}else {
const index = teamPlayers.findIndex((player) => player.id === payload.player.id);
teamPlayers[index].isChecked = true;
selected5Players.push(payload.player);
}
} else {
const index = teamPlayers.findIndex((player) => player.id === payload.player.id);
console.log(index);
var c = selected5Players.findIndex((val) => val.id === payload.player.id);
selected5Players.splice(c,1);
console.log(selected5Players)
teamPlayers[index].isChecked = false;
}
return { ...state, teamPlayers,selected5Players,isSaved};
},
[get5player]:(state,payload) => {
const selectedTeamplayer = [...state.selected5Players];
const istwoSelected = true;
console.log(selectedTeamplayer);
return { ...state, selectedTeamplayer,istwoSelected};
},
[get5Batsmen2BestBatsmen]:(state,payload) => {
let select5BatsmenAnd2BestBatsmen = [];
return { ...state, select5BatsmenAnd2BestBatsmen};
},
[deleteTeam]:(state,payload) => {
let selected5Players = [];
let select2batsmen = [];
let teamPlayers = [];
const isSaved = true;
const select5BatsmenAnd2BestBatsmen = [];
return {...state, select2batsmen, selected5Players,teamPlayers,isSaved,select5BatsmenAnd2BestBatsmen};
}
}, initialState);
export default createTeamReducer;