无法获取 get 请求并使用 fetch 打印输出 api

Question

我正在使用 React 从 API 使用 fetch API 获取数据并打印它，但是在执行获取请求后我无法从中检索数据。这是代码link。输入应为 CC(C)(C)Br，输出为 success message

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>
  );
}

Answer 1

这里有几个问题。

您的提交按钮不是提交类型，因此永远不会调用提交方法。
您还需要在提交处理程序上放置一个 preventDefault()，因为默认情况下会重新加载页面。

所以变化是->

<Button type="submit" variant="contained">Submit</Button>

和

const onSubmit = (e) => {
    e.preventDefault();
    fetch(.....

Updated Sandbox

ps. This is not specifically about React, this is how forms work in HTML.

Answer 2

  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);
      });
  };

无法获取 get 请求并使用 fetch 打印输出 api

unable to fetch a get request and print the output using fetch api

javascript

reactjs

forms

fetch

fetch-api