Как передать входные данные из ReactJS в Flask-Python (серверная часть)

#javascript #python #reactjs #forms #flask

Вопрос:

Я пытаюсь создать веб-сайт каталога с ReactJS в качестве интерфейса и Python Flask в качестве бэкенда. Я пытаюсь передать текстовые вводы в свой searchbar.js к моему скрипту Python, но я не могу найти способ отображения данных, которые я передал с внешнего интерфейса в моем бэкэнде, чтобы убедиться, что я действительно передал данные.

Вот мой searchbar.js где я попытался сохранить данные в переменной и передал их на маршрут api, который я сделал в python.:

 function SearchBar() {  const [searchedText, setSearchedText] = useState("");  let navigate = useNavigate();   const onSearch = () =gt; {  navigate(`/search?q=${searchedText}`);  fetch('/ML/search',{  method: 'POST',  body: JSON.stringify({  content:searchedText  })  })  };  return (  lt;divgt;  lt;Input.Search  placeholder="Enter keyword..."  onChange={(e) =gt; {  setSearchedText(e.target.value);  }}  onSearch={onSearch}  onPressEnter={onSearch}  enterButtongt;lt;/Input.Searchgt;  lt;/divgt;  ); } export default SearchBar;  

вот мой маршрут api в python для извлечения данных, которые были переданы с моего интерфейса:

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

Так что в основном я хочу, чтобы произошло то, что я хочу передать входные данные в своем searchbar.js на мой сервер Python и сохраните его как переменную, чтобы я мог использовать эту переменную для поиска столбца в SQL

Ответ №1:

Вы можете использовать приведенный ниже код для печати данных обратно в консоль.

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