Reactjs Probleme, wenn AJAX-Daten aus JSON-Datei

Question

Ich habe ein Problem, wenn ich eine reaktive Webanwendung entwickeln. Hier ist mein 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') 
) 

Und hier ist meine JSON-Datei:

{ 
    "merchantName":"xxxx", 
    "voucherCode":"xxxx", 
    "orderId":"xxxx", 
    "deal":"xxxx", 
    "dealDescription":"xxxx", 
    "price":"xxxx", 
    "redemptionStatus":"xxxx", 
    "redemptionTimestamp":"xxxx-xx-xx" 
} 

Wenn ich meinen Code ausführen, die Web-Seite zeigt nichts. Und in der Konsole kann ich keine relative Nachricht finden. Kann mir jemand helfen, das herauszufinden? Vielen Dank.

Answer 1

Sie verlieren den Kontext in Ajax-Callbacks. Obwohl loadVouchersFromServer ist gebunden success und error Callbacks sind nicht. Sie könnten Pfeilfunktionen oder bind diese Rückrufe verwenden.

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