Python не звонят (?) В React / Flask Project

Question

Резюме: я пытаюсь научиться Flask и React с инструментами, которые у меня есть под рукой во время пандемии c. Мне мешает отсутствие хорошего редактора React для удаленных файлов, я подозреваю, что, возможно, я не вижу сообщений об ошибках, которые показывает мне такой редактор, и я подозреваю, что сценарий python, который я пытаюсь вызвать, никогда не затрагивается .

Любая помощь, включая то, как лучше видеть сообщения об ошибках или то, что может быть неправильно настроено, отчаянно приветствуется.

Что у меня есть:

1. Интерфейс только из командной строки для контейнера Ubuntu 18.04. Это означает: нет удаленного рабочего стола, нет GUI, нет специализированного редактора реакции . Я ничего не могу с этим поделать.

2. Сервер React запущен и работает на порте контейнера 3000, доступном для внешнего мира с префиксом пути для этого вопроса и ответом . Это означает, что я могу запускать реакцию из командной строки текстового терминала, редактировать файлы проекта реакции в другом окне с помощью vi, указывать на него браузер из-за пределов системы, и он работает.

3. Flask сервер запущен и работает на порте контейнера 3001 (порт 5000 уже выполняет что-то еще) и сервер React настроен с портом 3001 в качестве прокси. Боже, помоги мне, я использую опцию DANGEROUSLY_DISABLE_HOST_CHECK, чтобы заставить это работать. Нет особого внимания к префиксу портов или переадресации портов - кажется, все это внутреннее для контейнера, поэтому я не думаю, какая-либо особая обработка необходима.

4. A учебный проект согласно на этом сайте . Я включу два соответствующих файла кода ниже.

Результат:

• Нет ошибок ни в одном из терминалов, где я вызвал серверы реакции и flask.

• Веб-страница отображается, но неправильно: вместо того, чтобы отображать правильное время, на странице отображается только то, что я предварительно загрузил в currentTime.

• Я очень скептически отношусь к тому, что скрипт python вообще когда-либо запускается: если я искажаю файл api.py с вопиющими синтаксическими ошибками ... никаких изменений в поведении. Если я искажаю App. js с ошибками, система умирает. Если я испортил приложение. js с указанной ошибкой c fetch('/garbage').then..., а не fetch('/time').then..., ошибок по-прежнему нет, что я считаю ОЧЕНЬ подозрительным.

• Это заставляет меня думать, что я, возможно, не вижу критических сообщений об ошибках или предупреждений.

• Мое подозрение заключалось в том, что это может быть какая-то проблема CORS, но два попытки адаптировать решения к этому вопросу не удались.

Код из приложения. js:

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

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

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

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <p>The current time is {currentTime}.</p>
      </header>
    </div>
  );
}

export default App;

Код из api.py (не включая CORS попытки):

import time
from flask import Flask

app = Flask(__name__)

@app.route('/time')
def get_current_time():
    return {'time': time.time()}

ОБНОВЛЕНИЕ:

По совету этого ответа , я добавил несколько операторов ведения журнала консоли и посмотрел на вход консоли Chrome.

App.js:11 GET http://<CORRECT_ADDRESS>/time 404 (Not Found)
(anonymous) @ App.js:11
commitHookEffectListMount @ react-dom.development.js:19731
commitPassiveHookEffects @ react-dom.development.js:19769
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
flushPassiveEffectsImpl @ react-dom.development.js:22853
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushPassiveEffects @ react-dom.development.js:22820
(anonymous) @ react-dom.development.js:22699
workLoop @ scheduler.development.js:597
flushWork @ scheduler.development.js:552
performWorkUntilDeadline @ scheduler.development.js:164

Примечание 1: порт 3001 не включен, что кажется неправильным. Примечание 2: префикс пути не включен, что кажется правильным.

Я ожидал, что это будет: App.js:11 GET http://<CORRECT_ADDRESS>:3001/time

Если порт, а не префикс пути, должен быть включен в этот вызов, как мне это организовать?

Flask работает на порту 3001, а последняя строка пакета. json:

"proxy": "http://localhost:3001"

Дальнейшее обновление :

с использованием fetch('http://<CORRECT_ADDRESS>:3001/time') теперь дает следующие ошибки консоли:

WebSocket connection to 'ws://<CORRECT_ADDRESS>/sockjs-node' failed: Error during WebSocket handshake: Unexpected response code: 404
The development server has disconnected.
Refresh the page if necessary.
GET http://<CORRECT_ADDRESS>:3001/time net::ERR_CONNECTION_TIMED_OUT
Uncaught (in promise) TypeError: Failed to fetch

Итак, GET выглядит правильно сформированным, теперь, но время ожидания истекает из-за неудачного вызова WebSockets, который может быть правильно сформирован, а может и не сформирован.

Answer 1

Возможно, вы видите бесконечное l oop, где состояние не имеет возможности обновиться.

Попробуйте следующее:

@app.route('/time')
def get_current_time():
    print( time.time() )
    return {'time': time.time()}

Есть ли у /time совпадения? Поскольку ваш код useEffect() будет запускаться каждый раз, когда изменяется состояние, то есть каждый раз, когда он запускается: бесконечный l oop.

Если /time не получает совпадений, ваша проблема в этом относительном пути . Попробуйте следующее:

useEffect(() => {
    console.log('fetching');
    fetch('/time').then(res => res.json()).then(data => {
        console.log('fetched:' + data);
        setCurrentTime(data.time);
    });
  }, []);

Затем проверьте свои порты. Похоже, у вас может быть React / Webpack, работающий на 3001, а сервер - на 5000.

Попробуйте следующее:

http://localhost: 5000 / time

http://localhost: 3000 / время

http://localhost: 3001 / время