Question

我正在尝试使用.NET Core 2.1和React模板来设置基本的CRUD应用程序。我有一个带有2个表的SQL Server数据库：tblEmployee，tblCities。

我已经成功使用Scaffold-DbContext创建了模型。然后将连接字符串添加到appsettings.json。

在我的Models文件夹中，添加了一个DataAccessLayer.cs（类），其中包含一些用于访问上下文的功能。

示例：

private readonly CoreReactAppContext db = new CoreReactAppContext();

public IEnumerable<TblEmployee> GetAllEmployees()
{
    try
    {
        var employees = db.TblEmployee.ToList();
        return employees;
    }
    catch
    {
        throw;
    }
}

从那里，我有一个EmployeeController.cs，可用来返回我的数据。

示例：

DataAccessLayer objemployee = new DataAccessLayer();

[HttpGet]
[Route("api/Employee/Index")]
public JsonResult Index()
{
    return new JsonResult(objemployee.GetAllEmployees());
}

所以这主要是我用于数据的API。

对于我的前端代码，我有一个FetchEmployee.js，它可以获取我所有的雇员并将其呈现在一个简单的html表中。

示例：

export class FetchEmployee extends Component {
    displayName = FetchEmployee.name

    constructor(props) {
        super(props);
        this.state = { empList: [], loading: true };

        fetch('api/Employee/Index', {
                method: 'get',
                headers: { 'Content-Type': 'application/json' }
            })
            .then(response => {
                response.json();
            })
            .then(data => {
                this.setState({ empList: data, loading: false });
            }).catch(function (error) {
                console.log('Something happened...', error);
            });

        this.handleDelete = this.handleDelete.bind(this);
        this.handleEdit = this.handleEdit.bind(this);
    }

    render() {
        let contents = this.state.loading
            ? <p><em>Loading...</em></p>
            : FetchEmployee.renderEmployeeTable(this.state.empList);

        return (
            <div>
                <h1>Employee Data</h1>
                <p>This component demonstrates fetching <b>Employee Data</b> from the server</p>
                <p>
                    <Link to="/addemployee">Create New</Link>
                </p>
                {contents}
            </div>    
        );
    }

    //Handle the delete request from the user for an employee
    handleDelete(id) {
        fetch('api/Employee/Delete/' + id, {
            method: 'delete'
        }).then(data => {
            this.setState(
                {
                    empList: this.state.empList.filter((rec) => {
                        return (rec.employeeId != id);
                    })
                });
        });
    }

    //Handle the edit request from the user for an employee
    handleEdit(id) {
        this.props.history.push('/employee/edit/' + id);
    }

    static renderEmployeeTable(empList) {
        return (
            <table className='table'>
                <thead>
                    <tr>
                        <th></th>
                        <th>Employee Identifier</th>
                        <th>Name</th>
                        <th>Gender</th>
                        <th>Department</th>
                        <th>City</th>
                    </tr>
                </thead>
                <tbody>
                    {empList.map(emp =>
                        <tr key={emp.employeeId}>
                            <td></td>
                            <td>{emp.employeeId}</td>
                            <td>{emp.name}</td>
                            <td>{emp.gender}</td>
                            <td>{emp.department}</td>
                            <td>{emp.city}</td>
                            <td>
                                <a className='action' onClick={(id) => this.handleEdit(emp.employeeId)}>Edit</a>  |
                                <a className='action' onClick={(id) => this.handleDelete(emp.employeeId)}>Delete</a>
                            </td>
                        </tr>
                    )}
                </tbody>
            </table>
        );
    }

我们可以同意，这里没有什么可看的。这是一个简单的GET，仅此而已，但我总是会收到此错误：

Unexpected token '<' json at position 0

无论我想做什么。

这些是我从App.js出发的路线：

    <Layout>
        <Route exact path='/' component={Home} />
        <Route path='/fetchemployee' component={FetchEmployee} />
    </Layout>

这是我的Network Tab

您能帮我弄清楚这个吗？您对我为什么要从控制器返回HTML有任何想法吗？

[编辑]

当我在"Accept": "application/json"的标题中添加fetch()时，我收到404提示：

Cannot GET api/Employee/Index

Answer 1

您遇到的一个问题是，您没有在诺言链中传播json结果：

[int64[]]$VHDSize = ($vm | Get-VMHardDiskDrive | Get-VHD).Size

您将需要以下内容：

.then(...)
.then(response => {
  response.json(); // <-- missing a return statement or you can eliminate the {}
})
.then(...)

通常，给定错误消息的常见原因是接收HTML但需要JSON。

.then(...)
.then(response =>
  response.json() // return the json promise so it can propagate down the chain
)
.then(...)

意味着您的有效负载看起来像Unexpected token '<' json at position 0，但是您试图将其解析为JSON，就会发生这种情况：

<html>...</html>

.NET Core 2.1使用React模板-使用“ fetch（）”时，位置0处的意外令牌<json

1 个答案: