CODEWITHSUNDEEP
reactjsreact-hooksaxios
user9695260
user9695260

Reputation: 367

Axios get request returns 404 when passed url path parameter

I have a React component "PostDetails" like this:

const PostDetails = () => {
const params = useParams();
const [post, setPost] = useState({});
const [fetchPostById, isLoading, error] = useFetching(async (id) => {
    const response = await PostService.getById(id);
    setPost(response.data);
})

useEffect(() => {
    fetchPostById(params.id)
}, [])

return (
    <div>
        <h1>Post details page for ID = {params.id}</h1>
        <div>{post.id}. {post.title}</div>
    </div>
);
};
export default PostDetails;

Custom hook "useFetching" is implemented like this:

export const useFetching = (callback) => {

const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');

const fetching = async () => {
    try {
        setIsLoading(true);
        await callback();
    } catch (e) {
        setError(e.message);
    } finally {
        setIsLoading(false);
    }
}

return [fetching, isLoading, error];
}

Utility class "PostService" is implemented like this:

export default class PostService {

static async getById(id) {
    const response = await axios.get("https://jsonplaceholder.typicode.com/posts/" + id);
    return response;
};
}

In browser console I get the error for "GET" request like this:

GET https://jsonplaceholder.typicode.com/posts/undefined 404

I tried to reformat my URL like this:

https://jsonplaceholder.typicode.com/posts/${id}

But still get the same error.

Why does "params.id" convert into undefined when I call my axios fetching request? What am I doing wrong here?

Upvotes: 0

Views: 700

Answers (4)

Stas
Stas

Reputation: 1

Try this. I have earned.

const PostDetails = () => {
const params = useParams();
const [post, setPost] = useState({});
const [fetchPostById, isLoading, error] = useFetching(async () => {
    const response = await PostService.getById(params.id);
    setPost(response.data);
})

useEffect(() => {
    fetchPostById(params)
}, [])

return (
    <div>
        <h1>Post details page for ID = {params.id}</h1>
        <div>{post.id}. {post.title}</div>
    </div>
);
};
export default PostDetails;

Upvotes: 0

Hacı Celal Aygar
Hacı Celal Aygar

Reputation: 518

can you try plz

useEffect(() => {
    params?.id && fetchPostById(params.id)
}, [])

Upvotes: 0

Peyman Mihankhah
Peyman Mihankhah

Reputation: 111

hope my code would be useful.

CodeSandBox

const [id, setId] = useState(1)
const [data, setData] = useState([]);

useEffect(() => {
const res = axios
  .get(`https://jsonplaceholder.typicode.com/posts/${id}`)
  .then((res) => setData(res.data));}, [id]);


return (
<>
  <div>Fetched Title of data</div>
  <div>{data.title}</div>
  <button onClick={() => setId(id + 1)}>Click to increase id</button>
  <button onClick={() => setId(id - 1)}>Click to decrease id</button>
</>);

Upvotes: 1

Asad Raza
Asad Raza

Reputation: 39

Please try this

const PostDetails = () => {
const {id} = useParams();
const [post, setPost] = useState({});
const [fetchPostById, isLoading, error] = useFetching(async (id) => {
   const response = await PostService.getById(id);
   setPost(response.data);
 })

useEffect(() => {
   id && fetchPostById(id)
}, [id])

return (
    <div>
       <h1>Post details page for ID = {params.id}</h1>
       <div>{post.id}. {post.title}</div>
    </div>
);
};

Upvotes: 1

Related Questions