ich einige Daten in den store nach anfänglichem Axios Aufruf geladen.Redux: Update Mutterkomponentendaten nach Kind Operationen
Dann render ich zwei Komponenten match (übergeordnete Komponente) und player (untergeordnete Komponente).
Dies ist die Art und Weise, die zwei Komponenten in einer verwandten Weise zu zeigen (dies ist ein vereinfachtes Beispiel aus meinem ursprünglichen Code, in diesem Beispiel könnte ich mein Problem auf eine andere Weise lösen, aber in meinem komplexen realen Code ist es wichtig zu eine Operationen bei Kindern Komponente zuerst tun):
match.js
class Match extends Component {
constructor(props) {
super(props);
}
render() {
return (
Object.values(this.props.matchs).map((match_id) => {
let match = this.props.matchs[match_id];
return (
<div key={match_id}>
<p>{match.tournament}</p>
<p>{match.color}</p> {/* this color depends of children condition*/ }
<div className="players">
{match.array_players.map ((player_id) => {
let player = this.props.players[player_id];
return (
<Player key={odd_id} ownPlayer={player} />
)
})
</div>
</div>
)
});
)
}
}
const mapStateToProps = state => {
return {
matchs: state.matchs.matchs,
players: state.players.players
};
}
const mapDispatchToProps = dispatch => {
return {
// actions
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Matchs);player.js
class Player extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<p>{this.props.ownPlayer.name}</p>
<p>{this.props.player_color}</p>
</div>
);
}
}
const mapStateToProps = (state, ownProps) => {
// I need to make some previous operations before render
let player_color;
if (ownProps.ownPlayer.name == "paul")
player_color = 'yellow';
else
player_color = 'blue';
// Then I Need to update parent component with children color condition
// if (player_color == 'yellow')
// match_color = 'yellow'
//
// Call some action here to update parent component???
// things like these do not work:
// let id_p = ownProps.player.id_player;
// state.players.players[id_p].color = 'blue'; This does not work
return {
player_color
};
};
const mapDispatchToProps = dispatch => {
return {
//
}
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Player);Dann brauche ich nach einigen Bedingungen bei Kindern Komponente eine Stütze in einer übergeordneten Komponente zu aktualisieren.
Ich habe diesen Artikel lesen:
https://redux.js.org/docs/recipes/ComputingDerivedData.html
Aber ich weiß nicht, wie Daten senden Stammkomponenten zu speichern und zu aktualisieren, bevor machen.
Ich dachte über Aufruf wie eine Aktion in componentWillMount oder componentWillUpdate, um Daten zu speichern, aber ich weiß nicht, ob es richtig ist.
Wenn Ihre untergeordnete Komponente ihre zwei Requisiten (die ihre Variablen sind) direkt von ihrem übergeordneten Element erhält, warum können Sie dann nicht den Wert dieser übergeordneten Requisite im übergeordneten Element selbst berechnen? –
Es ist ein einfaches Beispiel, was aufbaut, aber in meinem echten Code muss ich einige komplexe Berechnungen in Kindern durchführen, dann abhängig von diesen Berechnungen die Farbe der Elternkomponente aktualisieren (match) – kurtko