React 不显示来自 webapi 的数据

Question

我使用 .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）时，我应该能够看到我的数据库中列出的部门 table，就像我在使用 Postman 时所做的那样，但是没有显示记录。

我收到控制台错误：

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

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

Answer 1

您的服务器可能要求您指定内容类型，如果它接受多种类型的话

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

Answer 2

我发现了问题...

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

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

但应该是：

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

React 不显示来自 webapi 的数据

React not displaying data from webapi

.net

c#

reactjs

webapi