如何连接flask rest API输出以做出反应并显示结果

Question

I am doing inference using flask rest API and I got the result

{
result: {
predictions: -3.4333341121673584
} }

bypassing multiple args in the get as the URL I got the above result http://127.0.0.1:3000/predict?solute=CC(C)(C)Br&solvent=CC(C)(C)O Now I want to use this result to use in a react app.

I have written the code below

import { useState, useEffect } from "react";

function App() {
  const [state, setState] = useState({});

  useEffect(() => {
    fetch("api/")
      .then((response) => {
        if (response.status == 200) {
          return response.json();
        }
      })
      .then((data) => console.log(data))
      .then((error) => console.log(error));
  });

I have written the following using a tutorial on the internet. I am new to using fetch API or Axios. Need help to get this result in react app

Answer 1

import { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("http://127.0.0.1:3000/predict?solute=CC(C)(C)Br&solvent=CC(C)(C)O")
      .then((response) => {
        if (response.status == 200) {
          return response.json();
        }
      })
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  });

  if (loading) {
    return <p>Loading</p>
  }

  if (error) {
    return <p>{JSON.stringify(error)}</p>
  }

  return <p>{JSON.stringify(data)}</p>
}