我使用spring boot撰寫了一個簡單的api。例如，當我發送 http://localhost:8080/rps?choise=rock 請求時，回應是“你選擇 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;
uj5u.com熱心網友回復：
在您的 springboot application.properties 中更新以下配置并嘗試：
cors.allowed_from=http://localhost:3000
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/468532.html
標籤：javascript 反应 api 休息 反应钩子