Блог

Это мой первый опыт использования react и flask. Я пытаюсь отобразить время с конечной точки flask с помощью react. Я получаю статус 200 на сервере flask, но неверный запрос в браузере. Он не содержит кода ответа, но выделен красным цветом без информации об ответе.

Flask находится на порту 5000, а react — на 3000. Я добавил прокси в свой файл package.json в виде «прокси»: «http:localhost:5000 /».

На веб-сайте указано, что текущее время равно 0, что неверно, я не думаю, что react каким-то образом получает данные flask. Сторона flask выводит время, и я вижу, что на стороне сервера выдается код 200.

приложение flask (app.py ) содержится в главном каталоге вместе с приложением react (canoe-finder).

Я очень новичок в react. Поэтому любая помощь приветствуется.

Код реакции

 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;
  

когда я использую выборку (‘/ time’) вместо выборки (‘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).
  

Код Flask

 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())
  

Во-первых, правильный синтаксис для вашего сервера 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;