Tengo una aplicación simple donde quiero controlar un contador con React. Estoy tratando de entender cómo se envían los datos desde el frontend al backend y desde el backend al frontend.
Puedo ENVIAR el conteo al backend, pero no puedo devolver el conteo a React. useEffect funciona para la solicitud POST, pero no para la solicitud GET y no estoy seguro de por qué.
Leí esto Cómo enviar datos de React a Flask y luego volví a reaccionar y mostrar la salida en DOM , pero aún no estoy familiarizado con React lo suficiente como para comprender los componentes de la clase.
app.py
from flask import Flask, request app = Flask(__name__) @app.route('/led', methods=['GET', 'POST']) def led(): count = 1 if request.method == 'POST': count = request.json['count'] return {'backendCount': count} return {'backendCount': count}LED.js
import React, { useEffect, useState } from "react"; function LED() { const [count, setCount] = useState(1) const [backendData, setBackendData] = useState([{}]); function increment() { const newCount = count + 1; setCount(newCount); } function decrement() { const newCount = count - 1; setCount(newCount); } useEffect(() => { fetch('/led').then( response => response.json() ).then(data => setBackendData(data)) }, []); useEffect(() => { fetch('/led', { method: 'POST', headers: { "Content-Type": "application/json" }, body: JSON.stringify({"count": count}) }).then(() => { console.log("POST: " + count) }) }) return ( <div className="container"> <h1>LED Controller</h1> <p>Change the number of seconds between the LED turning on and off.</p> <h3>{count}</h3> <button onClick={increment}>+</button> <button onClick={decrement}>-</button> <h1>Increment from backend:</h1> <h3>{backendData.backendCount}</h3> </div> ); } export default LED;Creo que su declaración useState podría ser incorrecta y debería definir un tipo de variable diferente.
Debería probar esto, ya que parece que el backend es un objeto y no una matriz de objetos.
import React, { useEffect, useState } from "react"; function LED() { const [count, setCount] = useState(1) const [backendData, setBackendData] = useState({}); function increment() { const newCount = count + 1; setCount(newCount); } function decrement() { const newCount = count - 1; setCount(newCount); } useEffect(() => { fetch('/led').then( response => response.json() ).then(data => setBackendData(data)) }, {}); useEffect(() => { fetch('/led', { method: 'POST', headers: { "Content-Type": "application/json" }, body: JSON.stringify({"count": count}) }).then(() => { console.log("POST: " + count) }) }) return ( <div className="container"> <h1>LED Controller</h1> <p>Change the number of seconds between the LED turning on and off.</p> <h3>{count}</h3> <button onClick={increment}>+</button> <button onClick={decrement}>-</button> <h1>Increment from backend:</h1> <h3>{backendData.backendCount}</h3> </div> ); } export default LED;Resolví mi pregunta usando un botón para POST los datos al backend y luego GET al frontend.
app.py
from flask import Flask, request app = Flask(__name__) class StoredData: count = 1 def update_count(cls, num): cls.count = num data = StoredData() @app.route('/led', methods=['GET', 'POST']) def led(): if request.method == 'POST': count = request.json['count'] data.update_count(count) return {'backendCount': data.count} return {'backendCount': data.count}LED.js
import React, { useEffect, useState } from "react"; function LED() { const [count, setCount] = useState(1) const [backendData, setBackendData] = useState([{}]); function increment() { const newCount = count + 1; setCount(newCount); } function decrement() { const newCount = count - 1; setCount(newCount); } function handleTransfer() { fetch('/led', { method: 'POST', headers: { "Content-Type": "application/json" }, body: JSON.stringify({"count": count}) }).then(() => { console.log("POST: " + count) }) fetch('/led').then( response => response.json() ).then(data => setBackendData(data)) } return ( <div className="container"> <h1>LED Controller</h1> <p>Change the number of seconds between the LED turning on and off.</p> <h3>{count}</h3> <button onClick={increment}>+</button> <button onClick={decrement}>-</button> <h1>Increment from backend:</h1> <button onClick={handleTransfer}>Transfer Data</button> <h3>{backendData.backendCount}</h3> </div> ); } export default LED;