如何使用 React 请求我从用户那里获得的值到后端 api？

Question

我使用 spring 引导编写了一个简单的 api。例如，当我发送 http://localhost:8080/rps?choise=rock 请求时，响应是“你选择 Rock 并且 CPU 选择 Paper，你输了！”事实证明。

我使用 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;

Answer 1

在您的 springboot application.properties 中更新以下配置并尝试：

cors.allowed_from=http://localhost:3000

如何使用 React 请求我从用户那里获得的值到后端 api？

How can I request the value I get from the user to the backend api using react?

javascript

reactjs

api

rest

react-hooks