подача данных Ajax в React

Question

Я все еще относительно новичок в React. Постепенно я пытаюсь интегрировать реакцию в качестве внешнего интерфейса для своего веб-сайта MVC, однако, похоже, я застрял при переносе вызова AJAX в мою таблицу EmployeeGrid. Для моего индекса я делаю следующее

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

Вступление работает нормально, а GSC частично работает. Данные не отображаются в таблице. Это то, что у меня есть в моем 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");

Есть предложения?

---

Обновление

Я думаю, что, возможно, я не очень хорошо объяснил. Следующее ниже работает, но только если я вставлю его в .cshtml. Есть ли способ конвертировать это в файл JS или JSX?

<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')
);

Answer 1

Функциональный компонент EmployeeGridRow получает реквизиты в качестве параметра, поэтому для доступа к элементу это должен быть props.item, но не this.props.item

Изменение

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

К

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

Answer 2

Вы не должны предоставлять реквизиты подобным образом, вы фактически создаете экземпляр компонента, когда вы должны предоставить только класс или функцию, которые будут созданы в других компонентах.

export default EmployeeGridTable;

В других компонентах:

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