Thiết kế website giá rẻ

Question

i am making a database for my React (tsx) project. i was following a nodejs tutorial on how to link a sqlite database to it using FastAPI and i keep getting this error:

INFO:     127.0.0.1:59369 - "GET /putamens/ HTTP/1.1" 404 Not Found
INFO:     127.0.0.1:59369 - "GET /putamens/ HTTP/1.1" 404 Not Found
INFO:     127.0.0.1:59370 - "GET /putamens/ HTTP/1.1" 404 Not Found
INFO:     127.0.0.1:59370 - "GET /putamens/ HTTP/1.1" 404 Not Found

this is the App.tsx file that contains the functions it gives a red line under the (event) in the (handleFormSubmit) and (handleInfoChange) and says “Parameter ‘event’ implicitly has an ‘any’ type.” its also worth mentioning that the handleInfoChange and handleFormSubmit functions are grayed out and it says that they are not read:

import React, { useState, useEffect } from "react";

import api from "./api";

import reactLogo from "./assets/react.svg";
import "./App.css";
import Index from "./pages/Index";
import "./styling/index.css";
import "./styling/navbar.css";
import "./styling/signin.css";
import "./styling/signup.css";
import "./styling/sidebar.css";
import "./styling/healthnav.css";
import "./styling/healthdata.css";
import "./styling/rbd.css";
import "./styling/datscan.css";
import "./styling/appointments.css";
import "./styling/messaging.css";
import "./styling/dashboard.css";
import "./styling/dashboard-header.css";
import "./styling/help.css";
import "./styling/diagnosis-result.css";
import "./styling/view-profile.css";
import SignIn from "./pages/SignIn";
import SignUp from "./pages/Signup";
import Sidebar from "./components/Sidebar";
import HealthData from "./pages/HealthData";
import RBD from "./pages/RBD";
import DATSCAN from "./pages/DATSCAN";
import Appointments from "./pages/Appointments";
import Messaging from "./pages/Messaging";
import Dashboard_Patient from "./pages/Dashboard_Patient";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Help from "./pages/Help";
import Test from "./components/Side-Calendar";
import { Calendar } from "antd";
import SideCalendar from "./components/Side-Calendar";
import Cards from "./components/Cards";
import DiagnosisResult from "./pages/DiagnosisResult";
import ViewProfile from "./pages/ViewProfile";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Index />,
  },
  {
    path: "/signin",
    element: <SignIn />,
  },
  {
    path: "/signup",
    element: <SignUp />,
  },
  {
    path: "/healthdata",
    element: <HealthData />,
  },
  {
    path: "/rbdquestionnaire",
    element: <RBD />,
  },
  {
    path: "/datspect",
    element: <DATSCAN />,
  },
  {
    path: "/messages",
    element: <Messaging />,
  },
  {
    path: "/dashboard",
    element: <Dashboard_Patient />,
  },
  {
    path: "/appointments",
    element: <Appointments />,
  },
  {
    path: "/help",
    element: <Help />,
  },
  {
    path: "/Calendar",
    element: <SideCalendar />,
  },
  {
    path: "/card",
    element: <Cards />,
  },
  {
    path: "/diagnosisResult",
    element: <DiagnosisResult />,
  },
  {
    path: "/viewprofile",
    element: <ViewProfile />,
  },
]);

const App = () => {
  const [Putamens, setPutamens] = useState([]);
  const [formData, setFormData] = useState({
    caudate_R: "",
    caudate_L: "",
    putamen_R: "",
    putamen_L: "",
    Datscan_result: false,
  });

  const fetchPutamens = async () => {
    const response = await api.get("/putamens/");
    setPutamens(response.data);
  };

  useEffect(() => {
    fetchPutamens();
  }, []);

  const handleInputChange = (event) => {
    const value =
      event.target.type === "checkbox"
        ? event.target.checked
        : event.target.value;
    setFormData({
      ...formData,
      [event.target.name]: value,
    });
  };

  const handleFormSubmit = async (event) => {
    event.preventDefault();
    await api.post("/Putamens/", formData);
    fetchPutamens();
    setFormData({
      caudate_R: "",
      caudate_L: "",
      putamen_R: "",
      putamen_L: "",
      Datscan_result: false,
    });
  };

  return (
    <>
      <RouterProvider router={router} />
    </>
  );
};

export default App;

this is the page DATSCAN.tsx where im calling the handleFormSubmit and handleInfoChange functions to, this file is in a folder called “pages”, i imported the handleFormSubmit, handleInputChange and, formData, before importing them it gave me an error and said that they arent defined, after importing them it lets me view the page and insert the data but the data is not stored and gives me the error shown above in the terminal, also it shows a red line under the caudate_L, caudate_R, putamen_L, putamen_R when it is in this format (formData.caudate_L) and it says “Property ‘caudate_L’ does not exist on type ‘() => Element’.”:


import HealthNav from "../components/HealthNav";
import Sidebar from "../components/Sidebar";
import App from "../App";
import handleFormSubmit from "../App";
import handleInputChange from "../App";
import formData from "../App";
function DATSCAN() {
  return (
    <>
      <Sidebar />
      <HealthNav />
      <div className="maincontent datscancontent">
        <div className="wide-article">
          <h1 className="heading-article">
            DAT-SPECT (Dopamine Transporter Single-Photon Emission Computed
            Tomography) Imaging
          </h1>
          <p>
            DAT-SPECT imaging is a valuable diagnostic tool in the detection of
            Parkinson's disease (PD). This nuclear medicine technique allows for
            the visualization and assessment of dopamine transporter levels in
            the brain, specifically in the striatum, a region affected by
            PD-related neurodegeneration. By injecting a radiopharmaceutical
            that binds to dopamine transporters and emitting gamma rays,
            DAT-SPECT captures detailed images of dopamine activity. In PD, a
            reduction in dopamine transporter density is observed, aiding in the
            identification of characteristic neurochemical changes associated
            with the disease. DAT-SPECT imaging plays a crucial role in
            differentiating Parkinson's disease from other movement disorders
            and provides clinicians with objective evidence to support early and
            accurate diagnosis, facilitating timely intervention and
            personalized treatment plans for individuals affected by PD.
          </p>
        </div>
        <div className="wide-article" style={{ marginTop: "2%" }}>
          <h1 className="heading-article">
            Navigating DAT-SPECT Imaging: A Step-by-Step Guide to Accessing
            Parkinson's Diagnostic Imaging
          </h1>
          <p>
            To initiate DAT-SPECT imaging, begin by scheduling an appointment
            with a neurologist or movement disorder specialist to discuss your
            symptoms and medical history. Following a thorough clinical
            assessment, if deemed necessary, the healthcare provider will issue
            a referral for DAT-SPECT imaging. Contact local imaging facilities
            offering this service, considering factors such as insurance
            acceptance and pre-authorization requirements. Once a suitable
            facility is identified, schedule an appointment and adhere to any
            pre-imaging instructions provided. On the designated day, undergo
            the imaging procedure, involving the injection of a
            radiopharmaceutical and subsequent capture of gamma rays to create
            detailed images of dopamine transporter activity in the brain. After
            completion, the results will be analyzed by a radiologist and shared
            with your healthcare provider. Subsequently, your neurologist will
            discuss the findings, providing valuable insights into your
            condition and guiding any necessary treatment or follow-up steps.
            It's essential to follow the specific instructions of both your
            healthcare provider and the imaging facility throughout this
            process.
          </p>
          <a
            href="/appointments"
            className="btn btn-lg"
            style={{
              backgroundColor: "#FF8A15",
              color: "white",
              fontSize: "16px",
              paddingLeft: "20px",
              paddingRight: "20px",
              paddingTop: "10px",
              paddingBottom: "10px",
            }}
          >
            Book a consultation
          </a>
        </div>
        <div className="wide-article" style={{ marginTop: "2%" }}>
          <form onSubmit={handleFormSubmit}>
            <h1 className="heading-article">DAT-SPECT Imaging Results</h1>
            <p>
              If you have the results of your DaTscan, please fill them here. If
              not, your doctor can provide and fill in the information for you.
              If unsure, please contact a healthcare professional.
            </p>
            <label htmlFor="caudate_L" className="form-label">
              Caudate Left
            </label>
            <input
              type="text"
              id="caudate_L"
              name="caudate_L"
              className="form-control form-control-lg 
             questionnaire"
              aria-describedby="passwordHelpBlock"
              placeholder="Enter Caudate Left Value"
              onChange={handleInputChange}
              value={formData.caudate_L}
            />
            <div id="passwordHelpBlock" className="form-text info-input">
              The Caudate Left value represents the uptake of the radiotracer in
              the left caudate nucleus.
            </div>
            <label htmlFor="caudate_R" className="form-label">
              Caudate Right
            </label>
            <input
              type="text"
              id="caudate_R"
              name="caudate_R"
              className="form-control form-control-lg 
            questionnaire"
              aria-describedby="passwordHelpBlock"
              placeholder="Enter Caudate Right Value"
              onChange={handleInputChange}
              value={formData.caudate_R}
            />
            <div id="passwordHelpBlock" className="form-text info-input">
              The Caudate Right value represents the uptake of the radiotracer
              in the right caudate nucleus.
            </div>
            <label htmlFor="putamen_R" className="form-label">
              Putamen Right
            </label>
            <input
              type="text"
              id="putamen_R"
              name="putamen_R"
              className="form-control form-control-lg 
            questionnaire"
              aria-describedby="passwordHelpBlock"
              placeholder="Enter Putamen Right Value"
              onChange={handleInputChange}
              value={formData.putamen_R}
            />
            <div id="passwordHelpBlock" className="form-text info-input">
              The Putamen Right value represents the
            </div>
            <label htmlFor="putamen_L" className="form-label">
              Putamen Left
            </label>
            <input
              type="text"
              id="Putamen_L"
              name="Putamen_L"
              className="form-control form-control-lg 
            questionnaire"
              aria-describedby="passwordHelpBlock"
              placeholder="Enter Putamen Left Value"
              onChange={handleInputChange}
              value={formData.Putamen_L}
            />
            <div id="passwordHelpBlock" className="form-text info-input">
              The Putamen Left value represents the
            </div>
            <label className="form-label">DATSCAN Result</label>
            <select
              className="form-select form-select-lg mb-3 questionnaire"
              aria-label="Large select example"
            >
              <option value="1">Positive</option>
              <option value="2">Negative</option>
            </select>
            <div id="passwordHelpBlock" className="form-text info-input">
              A positive result indicates a reduction in dopamine transporter
              activity in certain areas of the brain, <br /> while a negative
              result suggests normal or near-normal dopamine transporter
              activity.
            </div>
            <button
              type="submit"
              className="btn btn-lg"
              style={{
                backgroundColor: "#FF8A15",
                color: "white",
                fontSize: "16px",
                paddingLeft: "20px",
                paddingRight: "20px",
                paddingTop: "10px",
                paddingBottom: "10px",
              }}
            >
              Upload
            </button>
          </form>
        </div>
      </div>
    </>
  );
}
export default DATSCAN;

Thiết kế website giá rẻ

Danh mục

React and Typescript and FastAPI code showing 404 error when inserting data to database