Reactjs problems when ajax data from json file

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)
    })
}