如何在沒有提交按鈕的情況下將POST請求從React發送到Flask

嘿抱歉，我對 React 和 Javascript 完全陌生，對此我真的很困惑。我正在嘗試創建一個部分，我將在 React 中有一個下拉串列。我已經從 Flask 中獲取了資料，現在當我點擊我選擇的選項時，我想將 POST 請求發送到 Flask（不點擊任何提交按鈕）。

我正在閱讀不同的答案并試圖弄清楚，所以我在獲取資料時使用了“fetch”，在嘗試發送請求時使用了“axios”。

應用程式.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']}

如果您需要任何其他資訊/代碼，請告訴我。另外，我打算在下面重新創建此影像。因此，當我在第一個下拉串列中進行選擇時，它應該向燒瓶發送請求并縮小下一個下拉串列的選項，依此類推。如果您需要任何澄清，請告訴我。謝謝！！

uj5u.com熱心網友回復：

如果要在進行選擇時發送 POST 請求，則不需要 a<form>或 submit 處理程式。

相反，添加一個效果掛鉤來監聽更改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

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

uj5u.com熱心網友回復：

請嘗試一下..您可以將資料發送到后端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]); 

標籤：javascript 反应 axios 获取 API

上一篇：通過Javascript插入HTML時，靜音視頻無法自動播放

下一篇：兩個表之間的SQL連接，不包括某些欄位