Escribí una API simple usando Spring Boot. Por ejemplo, cuando envío la solicitud http://localhost:8080/rps?choise=rock, la respuesta es "Tú eliges Rock y la CPU elige Paper, ¡Tú pierdes!" da vueltas.

Creé una interfaz simple usando ReactJs, hay 3 botones en la pantalla, piedra, papel y tijera. Cuando el usuario hace clic en uno de ellos, quiero enviar una solicitud a la API y mostrar el valor de respuesta en la pantalla. Descubrí que la solicitud no se envió cuando hice clic en los botones. ¿Cómo puedo solicitar el valor que obtengo del usuario a la API de backend y cómo puedo mostrar el valor de respuesta en la pantalla?

 import './App.css'; import React, {useState, useEffect} from 'react'; import RockImage from "./resources/rock.jpeg" import PaperImage from "./resources/paper.jpeg" import ScissorsImage from "./resources/scissors.jpeg" import GameBanner from "./resources/banner.png" import axios from 'axios'; function App() { const [userChoiceToWord,setUserChoiceToWord] = useState(); const [response,setResponse] = useState(); useEffect(function(){ onSubmit() },[userChoiceToWord]) async function onSubmit() { try { const response = await axios.post('http://localhost:8080/rps?choise=', userChoiceToWord); setResponse(response) alert(response); } catch (err) { setResponse(err) alert(err); } } function setRock(){ setUserChoiceToWord("Rock"); } function setPaper(){ setUserChoiceToWord("Paper"); } function setScissors(){ setUserChoiceToWord("Scissors"); } return ( <div className="App"> <img src={GameBanner} /> <br></br> <button><img src={RockImage} alt="rock" onClick={setRock}/></button> <button><img src={PaperImage} alt="paper" onClick={setPaper} /></button> <button><img src={ScissorsImage} alt="scissors" onClick={setScissors} /></button> </div> ); } export default App;