How To Reload The Data Of A Child When A Child Component Is Being Rendered In ReactJs
I have a table component which loads the data from an API it looks like this var Tablefortask = React.createClass({ getInitialState: function() {
Solution 1:
When ever you change the employeeId
componentWillReceiveProps(nextProps)
getting called.
componentWillReceiveProps: function(nextProps) {
if (nextProps.empId !== this.props.empId) {
this.loadCommentsFromServer(nextProps.empId);
}
},
loadCommentsFromServer: function(empId) {
$.ajax({
url: this.props.url + empId,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
componentDidMount: function() {
this.loadCommentsFromServer(this.props.empId);
},
Add the componentWillReceiveProps
and pass the nextProps.empId
with loadCommentsFromServer
.
Solution 2:
Each time your Table component is re-render, componentWillReceiveProps(nextProps)
is called (instead of componentDidMount
called only once at component first display). Try adding in your component:
componentWillReceiveProps: function(nextProps) {
this.loadCommentsFromServer();
},
Post a Comment for "How To Reload The Data Of A Child When A Child Component Is Being Rendered In ReactJs"