如何在没有提交按钮的情况下将 POST 请求从 React 发送到 Flask

Question

嘿抱歉，我对 React 和 Javascript 完全陌生，对此我真的很困惑。我正在尝试创建一个部分，其中我将在 React 中有一个下拉列表。我已经从 Flask 中获取了数据，现在当我单击我选择的选项时，我想将 POST 请求发送到 Flask（无需单击任何提交按钮）。

我阅读了不同的答案并试图找出答案，所以我在获取数据时使用了“fetch”，在尝试发送请求时使用了“axios”。

App.js

import React, { useEffect, useState } from "react"
import { DropdownItem } from "../Components/DropdownItem"
import Select from "react-select"
import axios from "axios"

export const DropdownPage = () => {
    const [years, setYears] = useState([])
    const [selectedYear, setSelectedYear] = useState("")

    useEffect(() => {
        fetch("http://127.0.0.1:5000/api", {
            method: "GET",
            headers: {
                "Content-type": "application/json",
            },
        })
            .then((res) => res.json())
            .then((data) => {
                setYears(data)
            })
    }, [])

    const handleDropdownSelectYear = (e) => {
        setSelectedYear(e.target.value)
    }
    const handleDropdownSubmitYear = (e) => {
        e.preventDefault()
        console.log(e)
        axios
            .post("http://127.0.0.1:5000/api/yearselect", selectedYear)
            .then((res) => {
                console.log(res)
            })
            .catch((err) => {
                console.log(err)
            })
    }
    return (
        <div>
            <form method="post" onSubmit={handleDropdownSubmitYear}>
                <select onChange={handleDropdownSelectYear}>
                    <option value="">Select Year</option>
                    {years.map((year) => (
                        <DropdownItem key={year.id} year={year}></DropdownItem>
                    ))}
                </select>
            </form>
        </div>
    )
}

api.py

class Year(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    content = db.Column(db.Text, nullable=False)

    def __str__(self):
        return f'{self.id} {self.content}'


def year_serializer(year):
    return {'id': year.id,
            'content': year.content}


@app.route('/api', methods=['GET'])
def index():
    return jsonify([*map(year_serializer, Year.query.all())])


@app.route('/api/yearselect', methods=['POST'])
def yearselect():
    if request.method == 'POST':
        request_data = request.get_json(force=True)
        year = Year(content=request_data['content'])
        db.session.add(year)
        db.session.commit()
        return {"201": request_data['content']}

如果您还需要 information/code，请告诉我。另外，我打算在下面重新创建这张图片。因此，当我在第一个下拉菜单中做出选择时，它应该向 flask 发送请求并缩小下一个下拉菜单的选项范围，依此类推。如果您需要任何说明，请告诉我。谢谢！！

Answer 1

如果您想在做出选择时发送 POST 请求，则不需要 <form> 或提交处理程序。

相反，添加一个效果挂钩来监听 selectedYear

的变化

// if selectedYear is going to be an object, don't initialise it as a string
const [selectedYear, setSelectedYear] = useState();

useEffect(() => {
  if (selectedYear) {
    fetch("http://127.0.0.1:5000/api/yearselect", {
      method: "POST",
      body: JSON.stringify(selectedYear),
      headers: { "content-type": "application/json" },
    })
      .then((res) => {
        if (!res.ok) return Promise.reject(res);
        return res.json();
      })
      .then((data) => {
        // do something with data ¯\_(ツ)_/¯
      })
      .catch(console.error);
  }
}, [selectedYear]); // effect hook dependencies

Effect hooks 也运行当初始化值时，建议在发出请求之前检查 selectedYear 的值。

Axios 等价物是

axios.post("http://127.0.0.1:5000/api/yearselect", selectedYear)
  .then(({ data }) => {
    // do something with data
  })
  .catch(err => {
    console.error(err.toJSON());
  });

Answer 2

请尝试一下.. 您可以将数据发送到后端 onchange 函数直接调用 handleDropdownSelectYear 函数

const handleDropdownSelectYear = (e) => {
    setSelectedYear(e.target.value)

    console.log(e)
    axios
        .post("http://127.0.0.1:5000/api/yearselect", e.target.value)
        .then((res) => {
            console.log(res)
        })
        .catch((err) => {
            console.log(err)
        })
}

或者你可以使用 useeffect 。

const handleDropdownSelectYear = (e) => {
    setSelectedYear(e.target.value)
}
useEffect(() => {
  if (selectedYear) {
        axios
            .post("http://127.0.0.1:5000/api/yearselect", selectedYear)
            .then((res) => {
                console.log(res)
            })
            .catch((err) => {
                console.log(err)
            })
  }
}, [selectedYear]);

如何在没有提交按钮的情况下将 POST 请求从 React 发送到 Flask

How to send POST request from React to Flask without submit button

javascript

reactjs

fetch-api

axios