Estoy tratando de crear una aplicación simple con matraz y reaccionar para mostrar algunos datos usando recargas.
Esto es lo que tengo para el backend.
import random import flask as flask from flask import jsonify app = flask.Flask(__name__) @app.route('/api/chart_data') def getChartData(): data = list(map(lambda _: {'x': random.random()*100, 'y': random.random()*100}, range(20))) return jsonify(data)Y para la interfaz de reacción tengo:
import React, { useState, useEffect } from 'react'; import { ScatterChart, Scatter, XAxis, YAxis, CartesianGrid } from 'recharts'; export default function RandomPlot() { const [data, setData] = useState([]); useEffect(() => { fetch('/api/chart_data') .then((res) => res.json()) .then((data) => { console.log("Plot data is: ", data); setData(data); }); }, []); return ( <> <div> <button>Generate new data</button> <ScatterChart width={400} height = {400}> <CartesianGrid /> <XAxis type="number" dataKey="x" /> <YAxis type="number" dataKey="y" /> <Scatter data={data} fille="green" /> </ScatterChart> </div> </> ); }Resultado deseado: quiero que el front-end muestre nuevos datos cuando el usuario presiona el botón "generar nuevos datos".
Lo que he intentado: sé que en el gancho de efecto de uso puede pasar valores a la matriz para que el código se ejecute cada vez que cambie uno de los valores. Intenté agregar una función onClick para el botón que cambia una variable que se pasó a la matriz de efectos de uso. No pareció funcionar.
No estoy seguro de qué pasar a la matriz useEffect para obtener el resultado deseado y cómo escribir la función onClick.
No creo que necesites el gancho useEffect para esto. useEffect se ejecuta cada vez que cambian los datos en la matriz en el segundo argumento, o si la matriz está vacía, se ejecutará cuando la página se cargue por primera vez.
Si desea generar datos cada vez que el usuario presiona un botón, entonces una función onClick debería ser suficiente. ¡Déjame saber si funciona! (Por cierto, esta es la primera vez que respondo en StackOverflow, por lo que puede haber algunos errores de formato).
import React, { useState, useEffect } from 'react'; import { ScatterChart, Scatter, XAxis, YAxis, CartesianGrid } from 'recharts'; export default function RandomPlot() { const [data, setData] = useState([]); function genData(){ fetch('/api/chart_data') .then((res) => res.json()) .then((data) => { console.log("Plot data is: ", data); setData(data); } return ( <> <div> <button onClick={genData}>Generate new data</button> <ScatterChart width={400} height = {400}> <CartesianGrid /> <XAxis type="number" dataKey="x" /> <YAxis type="number" dataKey="y" /> <Scatter data={data} fille="green" /> </ScatterChart> </div> </> ); }