React JS 和 flask 功能組件在點擊時呈現

Question

我正在嘗試使用 flask 創建一個簡單的應用程序，並使用重新圖表做出反應以顯示一些數據。

這就是我對后端的看法。

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)

對於反應前端，我有：

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>
        </>
    );
}

期望的結果：我希望前端在用戶按下“生成新數據”按鈕時顯示新數據。

我嘗試了什么：我知道在 use effect 掛鈎中，您可以將一個值傳遞到數組中，以便代碼在每次其中一個值更改時運行。 我嘗試為更改傳遞到使用效果數組的變量的按鈕添加 onClick function。 它似乎沒有用。

我不確定將什么傳遞到 useEffect 數組以獲得所需的結果以及如何編寫 onClick function。

Answer 1

我認為您不需要為此使用 useEffect 掛鈎。 useEffect 在數組中第二個參數的數據發生變化時運行，或者如果數組為空，它將在頁面首次加載時運行。

如果您想在用戶按下按鈕時生成數據，那么 onClick function 就足夠了。 讓我知道它是否有效，（順便說一句。這是我第一次在 StackOverflow 上回答問題，所以可能存在一些格式錯誤）。

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>
        </>
    );
}