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

Posted 2023-03-31

【中文标题】反应不显示来自webapi的数据[关闭]

【英文标题】：React not displaying data from webapi [closed]

【发布时间】：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 数据。

【参考方案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/