时间戳

首页 > 解决方案 > 从 Flask 后端选择选项值到 React 前端

javascript - 从 Flask 后端选择选项值到 React 前端

问题描述

我对 Javascript 和 React 框架还很陌生，但是我正在尝试创建一个仪表板，其中选择下拉按钮应显示医院列表，这些医院是从烧瓶后端中的数据处理的。我已经尝试过使用 html 前端，但尝试反应不起作用。这是我的反应选择下拉列表的外观

function Header(){
return(
<p id="label">Select Hospital:</p>
<select labelId="label" id="select" value="20">
    <option value="grapefruit">Grapefruit county hospital</option>
    <option value="{{hospitals[0]}}" selected>{{hospitals[0]}}</option>
    {% for hospital in hospitals[1:] %}
    <option value="{{hospital}}">{{hospital}}</option>
    {%endfor%}
</select>
)}

这是我的 Flask 后端：

from flask import Flask
from flask import Flask, render_template
import dash_backend

app = Flask(__name__)

# List of Hospitals


@app.route('/', methods=['GET'])
def index():

    hosp_list = dash_backend.hosp_list

    return render_template('index.html', hospitals=hosp_list)


if __name__ == '__main__':
    app.run()

我怎样才能从这个烧瓶后端获取数据（医院列表）到 React 前端选择下拉按钮？

标签： javascriptpythonreactjsflask

解决方案

我创建了一个反应组件来对 API 进行后端调用并呈现列表最后选择下拉列表。我在代码中使用了一个示例 API。您可以将其替换为您的烧瓶 API。

import React, { useState, useEffect } from 'react';

export default function App() {
  // to store all the hospitals
  const [hospitals, setHospitals] = useState([]);

  // to store selected hospital
  const [selectedHospital, setSelectedHospital] = useState('');

  // Make API call to get all hospitals on mount of the component
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => {
        setHospitals(data);
      });
  }, []);

  // Render the hospital list
  return (
    <div>
      <div>Selected Hospital: {selectedHospital}</div>
      <select onChange={e => setSelectedHospital(e.target.value)}>
        <option value="">Select Hospital</option>
        {hospitals.map(hospital => (
          <option key={hospital.id}>{hospital.name}</option>
        ))}
      </select>
    </div>
  );
}

推荐阅读