PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, October 13, 2022

[FIXED] Why can't clear error message after show - axios - react

 October 13, 2022     axios, javascript, react-hooks, reactjs, use-effect     No comments   

Issue

First question for context

I'm showing using with localhost:3000/users/:id API has 10 user so if request to localhost:3000/users/11 should show error message

Also want to show message for connection problems too I've tried to add setError(""); inside finally block but error message stopped working.

If I don't add this time working when I get error but when I fix error error still appear.

I want to show user details again

import { useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import axios from "axios";

function User() {
  const { id } = useParams();
  const [user, setUser] = useState(null);
  const [error, setError] = useState("");
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    axios("https://jsonplaceholder.typicode.com/users/" + id)
      .then((res) => setUser(res.data))
      .catch((error) => setError(error.message))
      .finally(() => setIsLoading(false));
  }, [id]);
  return (
    <div>
      {error === "Request failed with status code 404" ? (
        <p>{error}</p>
      ) : isLoading ? (
        <h2>Loading...</h2>
      ) : (
        <div>
          <h3>User Info</h3>
          <p>Name: {user.name}</p>
          <p>Email: {user.email}</p>
          <p>Phone: {user.phone}</p>
        </div>
      )}
    </div>
  );
}

export default User;

Solution

You have to clear your error when the response is OK

.then((res) => {
   setUser(res.data);
   setError("")
})

Codesandbox Demo


import { useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import axios from "axios";

function User() {
  const { id } = useParams();
  const [user, setUser] = useState(null);
  const [error, setError] = useState("");
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    axios("https://jsonplaceholder.typicode.com/users/" + id)
      .then((res) => {
        setUser(res.data);
        setError("")
      })
      .catch((error) => setError(error.message))
      .finally(() => setIsLoading(false));
  }, [id]);
  return (
    <div>
      {error === "Request failed with status code 404" ? (
        <p>{error}</p>
      ) : isLoading ? (
        <h2>Loading...</h2>
      ) : (
        <div>
          <h3>User Info</h3>
          <p>Name: {user.name}</p>
          <p>Email: {user.email}</p>
          <p>Phone: {user.phone}</p>
        </div>
      )}
    </div>
  );
}

export default User;


Answered By - dippas
Answer Checked By - Dawn Plyler (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing