时间戳

首页 > 解决方案 > 使用 React Proxy 显示 Flask 数据

python - 使用 React Proxy 显示 Flask 数据

问题描述

这是我第一次使用 react 和 flask。我正在尝试使用 react 显示烧瓶端点的时间。我在烧瓶服务器上获得 200 状态，但在浏览器上请求错误。它不包含响应代码，但显示为红色，没有响应信息。

Flask 在端口 5000 上，反应在 3000 上。我在 package.json 文件中添加了一个代理，格式为“proxy”：“http:localhost:5000/”。

该网站说当前时间是 0 这是错误的，我不认为反应以某种方式接收烧瓶数据。烧瓶端正在打印时间，我在服务器端看到它给出了 200 代码。

烧瓶应用程序（app.py）与反应应用程序（canoe-finder）一起包含在主目录中。

我很新的反应。因此，欢迎任何帮助。

反应代码

import React, { useState, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const [currentTime, setCurrentTime] = useState(0);

  useEffect(() => {
    fetch('http://localhost:5000/time').then(res => res.json()).then(data => {
      setCurrentTime(data.time);
    });
  }, []);

  return (
    <div className="App">
      <header className="App-header">

        ... no changes in this part ...

        <p>The current time is {currentTime}.</p>
      </header>
    </div>
  );
}

export default App;

当我使用 fetch('/time') 而不是 fetch('http://localhost:5000/time') 我收到此错误

Proxy error: Could not proxy request /time from localhost:3000 to http://localhost:5000:.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

烧瓶代码

from flask import Flask, render_template, redirect, url_for, request, jsonify, flash
import sqlite3
import time
from flask_sqlalchemy import SQLAlchemy
from sqlalchemy.ext.automap import automap_base

app = Flask(__name__)




@app.route('/time')
def get_current_time():
    print(time.time())
    return jsonify('time', time.time())

标签： pythonreactjsflask

解决方案

首先，在 localhost 上运行的 Flask 服务器的正确语法是http://localhost:5000. 其次，当您fetch('/time')在开发中时，开发服务器将识别出它不是静态资产，并将您的请求http://localhost:5000/time作为后备代理。

如果您有兴趣，可以在此处阅读有关此内容的更多信息。

此外，在 useEffect 中获取数据时，您应该有某种加载状态变量。

import React, { useState, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const [currentTime, setCurrentTime] = useState(0);
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    setLoading(true)
    fetch('http://localhost:5000/time').then(res => res.json()).then(data => {
      setCurrentTime(data.time);
    });
    setLoading(false)
  }, []);

  if (loading) return <h1>Loading data...</h1>
  return (
    <div className="App">
      <header className="App-header">
        <p>The current time is {currentTime}.</p>
      </header>
    </div>
  );
}

export default App;

推荐阅读