如何將輸入數據從 ReactJS 傳遞到 Flask-Python（后端）

Question

我正在嘗試使用 ReactJS 作為前端和 Python Flask 作為后端構建一個目錄網站。 我正在嘗試將 searchbar.js 中的文本輸入傳遞給我的 Python 腳本，但我找不到一種方法來顯示我從后端的前端傳遞的數據以確保我真的傳遞了數據。

這是我的 searchbar.js，我嘗試將數據存儲在一個變量中，並將其傳遞給我在 python 中創建的 api 路由。：

function SearchBar() {
  const [searchedText, setSearchedText] = useState("");
  let navigate = useNavigate();

  const onSearch = () => {
    navigate(`/search?q=${searchedText}`);
    fetch('/ML/search',{
      method: 'POST',
      body: JSON.stringify({
        content:searchedText
      })
    })
  };
  return (
    <div>
      <Input.Search
        placeholder="Enter keyword..."
        onChange={(e) => {
          setSearchedText(e.target.value);
        }}
        onSearch={onSearch}
        onPressEnter={onSearch}
        enterButton></Input.Search>
    </div>
  );
}
export default SearchBar;

這是我在 python 中的 api 路由，用於獲取從我的前端傳遞的數據：

@app.route('/ML/search', methods=['POST'])
def search():
    request_data = json.loads(request.data)
    searchData = request_data['content']
    return searchData

所以基本上我想要發生的是我想將我的 searchbar.js 中的輸入傳遞給我的 Python 后端並將其存儲為一個變量，以便我可以使用該變量在 SQL 中搜索一列

Answer 1

您可以使用以下代碼將數據打印回控制台。

  const onSearch = () => {
    navigate(`/search?q=${searchedText}`);
    fetch('/ML/search',{
      method: 'POST',
      body: JSON.stringify({
        content:searchedText
      })
    }).then(response => response.json()
      .then(data => ({ data, response })))
      .then(({ data, response }) =>  {
        console.log(data)
      })
  };