MasterDetailView
Zu Beginn dachte ich, dass die Realisierung einer MasterDetailView mittels React einfach wird. Dem scheint nicht so ...
Sie haben es doch gut hingekriegt.
Was noch nicht funktioniert sind die Instant Updates der DetailView zur MasterView.
Das scheint aber schon gut zu funktionieren! Oder verpasse ich da etwas?
componentWillReceiveProps
ist deprecated. Stattdessen kann man componentDidUpdate
benutzen:
componentDidUpdate = (prevProps) => {
if (prevProps.employee.id !== this.props.employee.id) {
this.setState({ ... this.props.employee })
}
}
Sie können den Code noch weiter vereinfachen:
class DetailForm extends React.Component {
constructor(props) {
super(props);
this.state = { ...this.props.employee }
}
change = event =>
this.setState({ [event.target.name]: event.target.value })
update = () =>
this.props.update({ ...this.state })
componentDidUpdate = (prevProps) => {
if (prevProps.employee.id !== this.props.employee.id) {
this.setState({ ...this.props.employee })
}
}
render() {
...
Sie könnten die Komponenten von ClassComps nach FunctionalComps migrieren, das würde weiter vereinfachen.
Die Warnings könnte man noch beseitigen, z.B. die keys, wenn man Listen von Elementen hat:
<MasterTableElement key={ employee.id } employee={ employee } ...
Hilft das Ihnen weiter, oder möchten Sie noch gerne einen Teams-Call?