0
私はリアクションWebアプリケーションを開発する際に問題があります。ここjsonファイルのajaxデータに問題がある場合
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')
)
そして、私のJSONファイルです:私は私のコードを実行すると
{
"merchantName":"xxxx",
"voucherCode":"xxxx",
"orderId":"xxxx",
"deal":"xxxx",
"dealDescription":"xxxx",
"price":"xxxx",
"redemptionStatus":"xxxx",
"redemptionTimestamp":"xxxx-xx-xx"
}
は、Webページが何を示していないが、ここに私のコードです。そして、コンソールでは、私は相対的なメッセージを見つけることができません。誰かがそれを理解するのを助けることができますか?ありがとう。
ブラウザのデベロッパーツールの[ネットワーク]タブには、リクエストについての記載はありますか? 'console.log(this.state)'は 'render()'の中で何を出力しますか? – cubrr
[ajaxコールバック後の反応状態の変更方法](https://stackoverflow.com/questions/44257176/how-to-change-react-state-after-an-ajax-callback)の可能な複製 –