Reactjs problems when ajax data from json file - json

Question

I have a problem when I develop a react web application. Here's my code:
class TableContentRow extends React.Component {
render(){
return(
<tr>
<td>{this.props.voucher.merchantName}</td>
<td>{this.props.voucher.voucherCode}</td>
<td>{this.props.voucher.orderId}</td>
<td>{this.props.voucher.deal}</td>
<td>{this.props.voucher.dealDescription}</td>
<td>{this.props.voucher.price}</td>
<td>{this.props.voucher.redemptionStatus}</td>
<td>{this.props.voucher.redemptionTimestamp}</td>
</tr>
);
}
}
class TableContent extends React.Component {
render() {
const rows = [];
this.props.vouchers.forEach((voucher) => {
if(voucher.orderId.indexOf(this.props.filterText) === -1){return;}
rows.push(<TableContentRow voucher = {voucher} key = {voucher.orderId} />);
})
return(
<div className="panel panel-primary">
<div className="panel-heading">
<h3 className="panel-title">
All Vouchers
</h3>
</div>
<table className="table table-striped">
<thead>
<tr>
<th>Restaurant</th>
<th>Voucher Code</th>
<th>Order ID</th>
<th>Deal</th>
<th>Deal Description</th>
<th>Sale Price</th>
<th>Redemption Status</th>
<th>Redemption Timestamp</th>
</tr>
</thead>
<tbody>
{rows}
</tbody>
</table>
</div>
);
}
}
class VoucherAll extends React.Component {
constructor(props){
super(props);
this.handleFilterTextInput = this.handleFilterTextInput.bind(this);
this.loadVouchersFromServer = this.loadVouchersFromServer.bind(this);
this.state = {filterText: ''};
}
handleFilterTextInput(filterText) {
this.setState({
filterText: filterText
});
}
loadVouchersFromServer() {
$.ajax({
url: this.props.url,
success: function(data) {
this.setState({
data: data
});
},
error: function(xhr,status,err) {
console.log(this.props.url, status, err.toString());
}
})
}
componentDidMount() {
this.loadVouchersFromServer();
setInterval(this.loadVouchersFromServer, this.props.pollInterval);
}
render(){
return(
<div className="container">
<TableContent
vouchers = {this.state.data}
filterText = {this.state.filterText}
/>
</div>
);
}
}
ReactDOM.render(
<VoucherAll url = "voucher.json" pollInterval = {2000} />,
document.getElementById('voucherAll')
)
And here's my json file:
{
"merchantName":"xxxx",
"voucherCode":"xxxx",
"orderId":"xxxx",
"deal":"xxxx",
"dealDescription":"xxxx",
"price":"xxxx",
"redemptionStatus":"xxxx",
"redemptionTimestamp":"xxxx-xx-xx"
}
When I run my code, the web page shows nothing. And in the console, I cannot find any relative message. Can anyone help me to figure that out? Thanks.

Answer 1

You are loosing context inside ajax callbacks. Though loadVouchersFromServer is binded success and error callbacks aren't. You could use arrow functions or bind those callbacks.
loadVouchersFromServer() {
$.ajax({
url: this.props.url,
success: data => {
this.setState({
data: data
});
},
error: function(xhr,status,err) {
console.log(this.props.url, status, err.toString());
}.bind(this)
})
}