is there another way to fetch details from API?-CodePudding

I am trying to fetch data using fetch function but somehow the request is not being processes

import React,{useState,useEffect} from 'react'
import { useParams } from 'react-router-dom'

const NotePage = () => {
    let noteId = useParams()
    let [note,setNote]=useState([])

    useEffect=( () => {
        getNote()

    },[noteId])

    let getNote=async()=>{
        #this function is not being processed
        let response = await fetch(`/api/notes/${noteId}/`)
        let data= await response.json()
        console.log("Data:",data)
        setNote(data)

    }

    return (
        <div>
            <h1>Single {note}</h1>

        </div>
    )
}

export default NotePage

Output: Single Expected output: Single data

CodePudding user response：

You have to get noteId from params like this,

let { noteId } = useParams();

CodePudding user response：

you have not destructured the object which we get from useParams. Instead of writing let noteId = useParams(); write const {noteId} = useParams() also you can remove the dependency from useEffect() as the noteId will not be updated unless your Params change, and if the params change the component will obviously re-render.