反应不显示来自webapi的数据[关闭]答案

【问题标题】：React not displaying data from webapi [closed]反应不显示来自webapi的数据[关闭]
【发布时间】：2021-08-23 14:10:43
【问题描述】：

我使用 .NET Core 构建了一个 webapi，我可以使用 Postman 从 webapi 获取数据。

我在前端使用 React，但似乎无法显示数据。

webapi 已经在后台运行。

在 React 中，我创建了以下 .env 文件来使用 webapi：

 REACT_APP_API=http:http://localhost:5000/api/

我的 app.js 文件如下所示：

import logo from './logo.svg';
import './App.css';

import {Home} from './Home';
import {Department} from './Department';
import {Employee} from './Employee';
import {Navigation} from './Navigation';

import {BrowserRouter, Route, Switch} from 'react-router-dom';

function App() {
 return (
  <BrowserRouter>
   <div className="container">
     <h3 className="m-3 d-flex justify-content-center">
      React JS
     </h3>

     <Navigation/>

     <Switch>
      <Route path="/" component={Home} exact />
      <Route path="/department" component={Department} />
      <Route path="/employee" component={Employee}/>
     </Switch>
   </div>
  </BrowserRouter>
 );
}

export default App;

由于我试图显示部门数据，因此我使用以下 Department.js 文件，其内容如下：

import React, {Component} from 'react';
import {Table} from 'react-bootstrap';

export class Department extends Component{

constructor(props){
    super(props);
    this.state={deps:[]}
}

refreshList(){
    fetch(process.env.REACT_APP_API+'department')
    .then(response=>response.json())
    .then(data=>{
        this.setState({deps:data});
    });
}

componentDidMount(){
    this.refreshList();
}

componentDidUpdate(){
    this.refreshList();
}

render(){
    const {deps}=this.state;
    return(
        <div>
            <Table className="mt-4" striped bordered hover size="sm">
                <thead>
                    <tr>
                        <th>DepartmentId</th>
                        <th>DepartmentName</th>
                        <th>Options</th>
                    </tr>
                </thead>
                <tbody>
                    {deps.map(dep=>
                        <tr key={dep.DepartmentId}>
                            <td>{dep.DepartmentId}</td>
                            <td>{dep.DepartmentName}</td>
                            <td>Edit / Delete</td>
                        </tr>
                        )}
                </tbody>
            </Table>
        </div>
    )
 }
}

当我启动 React（使用 npm start）时，我应该能够看到我的数据库表中列出的部门，就像我在使用 Postman 时所做的那样，但是没有显示记录。

我收到一个控制台错误，内容如下：

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

但我不确定该错误究竟指向何处。

【问题讨论】：

在您浏览器的调试工具中，在网络选项卡上，是否向服务器发出了 AJAX 请求？它是否包含您期望的数据？服务器的响应是什么？
请原谅我问，但我怎么知道哪一个是 AJAX 请求？
它将是在您的应用程序逻辑中的预期时间或事件中调用的任何请求（在这种情况下是在加载组件时？）并指向请求的预期 URL。一些浏览器还包括过滤请求的选项。例如，在 Chrome 中，您可以单击“Fetch/XHR”，它应该将列表过滤为仅 AJAX 请求。
@David - 如果我没看错的话，应该返回数据的文件是 Department。当我单击部门时，在预览窗口中显示“您需要启用 JavaScript 才能运行此应用程序”。也许这可能是问题所在？
这听起来可能确实是问题所在。如果 AJAX 请求期待 JSON 响应，但接收到 HTML 响应，那么这将导致所描述的错误。您可能需要进一步调试正在发出的请求以及服务器如何处理该请求，因为听起来它正在响应包含 React 应用程序的页面，而不是响应 API 数据。

标签： c# reactjs .net webapi

【解决方案1】：

您的服务器可能需要您指定内容类型（如果它接受多种类型）

fetch(process.env.REACT_APP_API+'department', {
  headers: {
    'Accept': 'application/json'
  }
})
    .then(response=>response.json())
    .then(data=>{
        this.setState({deps:data});
    });

【讨论】：

我添加了你建议的那段代码，在网络选项卡中，部门在预览窗口中显示如下：“Cannot GET /localhost:5000/api/department”
检查您的环境变量，并尝试在您的浏览器上打开该 url 以查看它是否有响应。通过在代码中的某处调用来尝试来自 console.log(process.env.REACT_APP_API+'department) 的 URL

【解决方案2】：

我发现了问题...

在 .env 文件中，它正在读取：

REACT_APP_API=http:http://localhost:5000/api/

但应该是：

REACT_APP_API=http://localhost:5000/api/

【讨论】：