Background:
The simple user story for background here is that I wanted to select a customer from a list and then display a list of locations associated with the customer to pick from. The first reference (customer) is sorted out by a ReferenceInput which then triggers a FormDataConsumer which renders a custom component which uses a Query to look up the customer data and then pass the locations list of ids to a nested Query to get the locations for use in a SelectInput. (Let me know if it would be helpful to see the code implementing the pattern above.)
What you were expecting:
When changing customers I expected the locations SelectInput to be re-rendered with the new customer's locations as choices
What happened instead:
When setting a customer the first time it all worked fine. When changing the customer after that initial time all the machinery fired off but the data in the Query was from the initial customer.
Related code:
I fixed the issue by implementing componentDidUpdate. I copied the react-admin Query component and replaced componentDidMount with all of the code here:
queryAndSetState = () => {
const { dataProvider, type, resource, payload, options } = this.props;
dataProvider(type, resource, payload, options)
.then(({ data, total }) => {
this.setState({
data,
total,
loading: false
});
})
.catch(error => {
this.setState({
error,
loading: false
});
});
};
componentDidMount = () => this.queryAndSetState();
componentDidUpdate = prevProps => {
// This should be enough to ensure we update when we want and avoid an infinte loop
// JSON pattern should work here since we already rely on it for the
// simple types used for query objects. We could also compare using
// ids only but more parsing would be needed.
if ( JSON.stringify(prevProps.payload) === JSON.stringify(this.props.payload) ) {
return;
}
this.queryAndSetState(prevProps);
};
Environment
- React-admin version:
^2.8.5
- React version:
^16.8.6
Background:
The simple user story for background here is that I wanted to select a customer from a list and then display a list of locations associated with the customer to pick from. The first reference (customer) is sorted out by a
ReferenceInputwhich then triggers aFormDataConsumerwhich renders a custom component which uses aQueryto look up the customer data and then pass the locations list of ids to a nestedQueryto get the locations for use in a SelectInput. (Let me know if it would be helpful to see the code implementing the pattern above.)What you were expecting:
When changing customers I expected the locations
SelectInputto be re-rendered with the new customer's locations as choicesWhat happened instead:
When setting a customer the first time it all worked fine. When changing the customer after that initial time all the machinery fired off but the data in the Query was from the initial customer.
Related code:
I fixed the issue by implementing
componentDidUpdate. I copied the react-adminQuerycomponent and replacedcomponentDidMountwith all of the code here:Environment
^2.8.5^16.8.6