如何将输入数据从 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)
      })
  };