在React中提供Ajax数据

Question

I'm still relatively new to React. Slowly, I'm trying to integrate react as a front end for my MVC website, however I seem to be stuck on migrating an AJAX call into my EmployeeGrid Table. For my Index I'm doing the following

<Route exact path='/' component={Intro} />
<Route exact path='/Home/GSC' component={GSC} />

The Intro works fine, and GSC partially works. The data is not showing in the table. This is what I have in my GSC.js

import React from 'react';

function EmployeeGridRow() {
    <tr>
        <td>{this.props.item.AccountID}</td>
        <td>{this.props.item.AccountName}</td>
        <td>{this.props.item.SenderName}</td>
        <td>{this.props.item.SenderEmail}</td>
        <td>{this.props.item.ITEmailReceipients}</td>
        <td>{this.props.item.Active}</td>
    </tr>;
}

class EmployeeGridTable extends React.Component {
    getInitialState() {
        return {
            items: []
        };
    }

    componentDidMount() {
        //Fetch data via ajax
        $.get(this.props.dataUrl, function (data) {
            if (this.isMounted()) {
                this.setState({
                    items: data
                });
            }
        }.bind(this));
    }
    
    render() {
        var rows = [];
        this.state.items.forEach(function (item) {
            rows.push(
                <EmployeeGridRow key={item.AccountID} item={item} />);
        });
        return (
            <table className="table table-bordered table-responsive">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Sender</th>
                        <th>Email</th>
                        <th>IT Support</th>
                        <th>Active</th>
                    </tr>
                </thead>
                <tbody>
                    {rows}
                </tbody>
            </table>);
    }
}

export default EmployeeGridTable(dataUrl = "/Home/GetEmployeeData");

Any suggestions?

---

Update

I'm thinking that maybe I didn't explain well. The following below works, but only if I insert it into a .cshtml. Is there any way of converting this into a JS or JSX file?

<script type="text/babel">
@* Here we will create 2 react component 1 for rows and another for table  *@
var EmployeeGridRow = React.createClass({
render : function(){
return (
<tr>
    <td>{this.props.item.AccountID}</td>
    <td>{this.props.item.AccountName}</td>
    <td>{this.props.item.SenderName}</td>
    <td>{this.props.item.SenderEmail}</td>
    <td>{this.props.item.ITEmailReceipients}</td>
    <td>{this.props.item.Active}</td>
</tr>
);
}
});

var EmployeeGridTable = React.createClass({
getInitialState: function(){
return {
items:[]
}
},
componentDidMount:function(){
@* Fetch data via ajax *@
$.get(this.props.dataUrl, function(data){
if(this.isMounted()){
this.setState({
items: data
});
}
}.bind(this));
},
render : function(){
var rows = [];
this.state.items.forEach(function(item){
rows.push(
<EmployeeGridRow key={item.AccountID} item={item} />);
});
return (
<table className="table table-bordered table-responsive">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Sender</th>
            <th>Email</th>
            <th>IT Support</th>
            <th>Active</th>
        </tr>
    </thead>
    <tbody>
        {rows}
    </tbody>
</table>);
}
});
ReactDOM.render(
<EmployeeGridTable dataUrl="/Home/GetEmployeeData" />,
document.getElementById('griddata')
);

</div>

Answer 1

You should not provide the props like this, you are in fact instantiating the component when you should only provide the class or function to be instantiated in other components.

export default EmployeeGridTable;

In other components:

<Route exact path='/' component={Intro} />
<Route exact path='/Home/GSC' component={() => <GSC dataUrl="/Home/GetEmployeeData" />} />