如何使用react向后端api请求用户提供的值?

我用spring boot编写了一个简单的api。例如,当我发送http://localhost:8080/rps?choise=rock请求时,回答是“你选择石头,CPU选择纸张,你输了!”它转过来了。

我用ReactJs创建了一个简单的界面,屏幕上有3个按钮:石头、布和剪刀。当用户单击其中一个时,我想向API发送一个请求,并在屏幕上显示响应值。当我点击按钮时,我发现请求没有被发送。如何向后端api请求从用户获得的值,以及如何在屏幕上显示响应值?

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;