时间戳

首页 > 解决方案 > 如何从 Express API 获取数据并将其显示到 React 应用程序？

node.js - 如何从 Express API 获取数据并将其显示到 React 应用程序？

问题描述

我最近开始学习反应，我正在尝试创建一个应用程序，该应用程序使用我使用 Express 创建的 API。

目前我在http://localhost:3000/api本地托管我的 Express API

但是，当我打开邮递员或浏览器并向http://localhost:3000/api/tasks发送 GET 请求时，我得到了我的 API 上的所有任务，正如预期的那样。

我的反应应用程序看起来像这样

class App extends React.Component{
  constructor(){
    super()
    this.state = {
      tasks: {}
    }
  }
...
  componentDidMount() {
     this.setState({loading: true})
     fetch("http://localhost:3000/api/tasks/1")
       .then(response => response.json())
       .then(data => {
         this.setState({
           tasks: data
         })
       })
   }
...
  render() {
    return(
      <div>
        <p>{this.state.tasks.id}</p>
      </div>
  }
}

当我在浏览器中打开 dev 选项卡时，我可以看到请求（代码：304）已发送，并且有一个响应，它是一个包含我需要的对象的 json 文件。不过，我无法显示从 API 获取的数据。

标签： node.jsreactjsapiexpresslocalhost

解决方案

有一个 node.js 包用于提供 Connect/Express 中间件，该中间件可用于启用具有各种选项的 CORS。

(npm cors)

推荐阅读