React下拉框值无法传递至FastAPI后端问题求助

1. submit函数未传递下拉框参数 #

submit函数调用display时只传了文本参数，未携带下拉框选中值，导致URL查询参数为空。

修复：调用display时传入MultiOption1和MultiOption2：

const submit = async () => {
    const inputText = document.getElementById("text").value;
    if (inputText) {
      display(inputText, MultiOption1, MultiOption2);
      document.getElementById("text").value = "";
    } else {
      setValidationError(true);
    }
};

2. display函数参数遮蔽组件状态 #

display函数定义的参数MultiOption1、MultiOption2会覆盖组件同名状态变量，调用时参数缺失会导致值为undefined。

修复：移除函数内的这两个参数，直接使用组件状态：

async function display(text) {
    let response = "";
    await fetch(`http://0.0.0.0:80/route?MultiOption1=${MultiOption1}&MultiOption2=${MultiOption2}`,
    {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ text }) // 可选：将文本内容传入请求体
    }).then(resp => resp.json()).then(data => {
        console.log("data...", data);
        response = data;
    });
};

3. FastAPI后端参数接收方式错误 #

POST请求的URL查询参数需要用Query显式声明，否则FastAPI会默认从请求体读取（而你的请求体为空），导致后端接收到空值。

修复后端代码：

from fastapi import Query

@app.post("/route")
def ask(MultiOption1: str = Query(None), MultiOption2: str = Query(None)):
    # 处理逻辑示例
    return {"received_MultiOption1": MultiOption1, "received_MultiOption2": MultiOption2}

4. 优化文本输入的状态管理 #

组件中用普通变量let text = ""无法追踪状态变化，建议改用useState管理输入框内容，避免DOM操作带来的不一致：

const [inputText, setInputText] = useState('');

// 输入框变更事件
const handleInputChange = (e) => {
    setInputText(e.target.value);
};

// 修改EnterPress函数
function EnterPress(event) {
    if (inputText) {
      setValidationError(false);
      if (event.keyCode === 13) {
        display(inputText, MultiOption1, MultiOption2);
        setInputText("");
      }
    } else {
      if (event.keyCode === 13) {
        setValidationError(true);
      }
    }
}

// 输入框JSX更新
<input
    type="text"
    id="text"
    value={inputText}
    onChange={handleInputChange}
    className={validationError ? 'errorText' : 'text'}
    onKeyDown={EnterPress}
/>

完整修正后的React代码 #

import "./App.css";
import React, { useState } from "react";

function App() {
  const [isDropdownOpen, setDropdownOpen] = useState(false);
  const [validationError, setValidationError] = useState(false);
  const [inputText, setInputText] = useState('');

  const [MultiOption1, setMultiOption1] = useState('');
  const [MultiOption2, setMultiOption2] = useState('');

  const OptionChange1 = (event) => {
    setMultiOption1(event.target.value);
  };

  const OptionChange2 = (event) => {
    setMultiOption2(event.target.value);
  };

  const handleInputChange = (e) => {
    setInputText(e.target.value);
  };

  function EnterPress(event) {
    if (inputText) {
      setValidationError(false);
      if (event.keyCode === 13) {
        display();
        setInputText("");
      }
    } else {
      if (event.keyCode === 13) {
        setValidationError(true);
      }
    }
  }

  const submit = async () => {
    if (inputText) {
      display();
      setInputText("");
    } else {
      setValidationError(true);
    }
  };

  async function display() {
    let response = "";
    await fetch(`http://0.0.0.0:80/route?MultiOption1=${MultiOption1}&MultiOption2=${MultiOption2}`,
    {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ text: inputText })
    }).then(resp => resp.json()).then(data => {
      console.log("data...", data);
      response = data;
    });
  };

  return (
    <>
      <div className="divBlock ff">
        <div className="app-container">
          <div className="left-panel">
            <label htmlFor="dropdown1">Dropdown 1:</label>
            <select id="dropdown1" value={MultiOption1} onChange={OptionChange1}>
              <option value="Option1">Option 1</option>
              <option value="Option2">Option 2</option>
              <option value="Option3">Option 3</option>
            </select>
            <label htmlFor="dropdown2">Dropdown 2:</label>
            <select id="dropdown2" value={MultiOption2} onChange={OptionChange2}>
              <option value="OptionA">Option A</option>
              <option value="OptionB">Option B</option>
            </select>
          </div>
          
          <div className="Block">
            {/* Additional div elements */}
            <div className="text-field">
              <input
                type="text"
                id="text"
                value={inputText}
                onChange={handleInputChange}
                className={validationError ? 'errorText' : 'text'}
                onKeyDown={EnterPress}
              />
              
              <button onClick={submit} className="arrowButton">
                <ion-icon className="arrow" name="send"></ion-icon>
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default App;

验证步骤 #

1. 启动FastAPI后端，确保接口监听80端口
2. 运行React应用，选择下拉框选项，输入文本后点击发送或按回车
3. 查看浏览器控制台的请求URL，确认MultiOption1和MultiOption2参数已正确携带
4. 后端返回参数验证接收结果

内容的提问来源于stack exchange，提问作者user2966197