我正在使用 react 從使用 fetch API 的 API 獲取資料并列印它，但在執行 fetch 請求后我無法從中檢索資料。這是代碼鏈接。輸入應該是CC(C)(C)Br，輸出是success訊息
import React, { useState } from "react";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
export default function App() {
const [solutestate, setSolutestate] = useState("");
const [fetchData, setFetchData] = useState("");
console.log(solutestate);
console.log(fetchData);
let params = new URLSearchParams({
solute: solutestate
});
const onSubmit = (e) => {
fetch(
`https://fastapi-n7b7u.app/predict_two?${params}`,
{
method: "GET"
}
)
.then((res) => res.json())
.then((result) => {
setFetchData(result);
});
};
return (
<div className="App">
<>
<form noValidate onSubmit={onSubmit}>
<div>
Input: CC(C)(C)Br
<TextField
label="Solute"
variant="outlined"
onChange={(e) => setSolutestate(e.target.value)}
/>
<Button variant="contained">Submit</Button>
<TextField label="Result" variant="outlined" value={fetchData} />
</div>
</form>
</>
</div>
);
}
uj5u.com熱心網友回復：
這里有幾個問題。
- 您的提交按鈕不是提交型別，因此永遠不會呼叫提交方法。
- 您還需要在您的提交處理程式上放置一個 preventDefault() ，因為默認值將重新加載頁面。
所以變化是->
<Button type="submit" variant="contained">Submit</Button>
和
const onSubmit = (e) => {
e.preventDefault();
fetch(.....
更新沙盒
附言。這不是專門針對 React，這是表單在 HTML 中的作業方式。
uj5u.com熱心網友回復：
const onSubmit = (e) => {
e.preventDefault()
let params = new URLSearchParams({
solute: solutestate
});
fetch(
`https://fastapi-ihub-n7b7u.ondigitalocean.app/predict_two?${params}`,
{
method: "GET",
content-type : "application/json"
}
)
.then((res) => res.json())
.then((result) => {
setFetchData(result);
});
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/425165.html