I have a react component with a form for updating database records.
Here's the thing: the data is loaded with React-Relay QueryRenderer component as follows:
class Update extends Component {
//constructor..
//some stuff
render() {
return(
<QueryRenderer
environment={environment}
query={UpdateQuery}
render={({error, props}) => {
//validations
return (
<Form loading={this.state.loading}>
//inputs
</Form>
)...
}/>
)}
function initValues(props){
if(!this.state.name)
this.setState({name: props.result.name})
}
Use componentWillReceiveProps in your Form component
class Form extends React.Component {
...
componentWillReceiveProps(nextProps) {
if (nextProps.loading) return
this.setState({
name: nextProps.name
})
}
...
}
This will only set the state once as soon as the data is available, since QueryRenderer only calls render once after the data has loaded.