Error XMLHttpRequest GET not working in React js

0 votes

I have a Profile class, like this :

 class Profile extends React.Component {
    state = {
        email: '',
        userName: '',
        userID: ''
    };

    getData() {
        var request = new XMLHttpRequest();

        request.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                console.log(this.responseText);
            }
        };
        request.open('GET', 'http://localhost:8080/user/1');
        request.send();
        console.log(request.responseText);
    }

    render() {
        return ( <
            div >
            this.getData(); <
            /div>

        );
    }
}

The problem is it is not putting anything in the console.

Although http://localhost:8080/user/1 in browser returning me this :

{"userID":1,"passwordHash":"5994471abb01112afcc18159f6cc74b4f511b99806da59b3caf5a9c173cacfc5","email":"admin@admin.com"}

How to resolve this?

Jun 4, 2020 in Angular by kartik
• 37,510 points
796 views

1 answer to this question.

0 votes

Hello @kartik,

You should populate data with AJAX calls in the componentDidMount lifecycle method. This is so you can use setState to update your component when the data is retrieved.

Example from react documentation

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      userName: '',
      userID: '',
      error: null,
      isLoaded: false
    };
  }

  componentDidMount() {

 fetch("http://localhost:8080/user/1")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            email: result.email,
            userName: result.userName,
            userID: result.userID
          });
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {
    const { error, isLoaded, email, userName, userID  } = this.state;
    return (
        <ul>
          {email}
          {userName}
          {userID}
        </ul>
    );
  }
}

Hope this work!

answered Jun 4, 2020 by Niroj
• 82,720 points

Related Questions In Angular

0 votes
1 answer

Error:Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

Hello @kartik, It is happening because any where ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,720 points
1,256 views
0 votes
1 answer

Error:Unable to access React instance (this) inside event handler

Hello @kartik, You can use an arrow function together with ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,720 points
551 views
0 votes
1 answer

How do you import a javascript package from a cdn/script tag in React?

Hello, Go to the index.html file and import ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,720 points
9,342 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,720 points
7,170 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,720 points
819 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,720 points
638 views
+1 vote
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,720 points
7,587 views
0 votes
1 answer

Error:getting “ENOTEMPTY: directory not empty, rmdir …” error on installing express in angular CLI app.

Hello Kartik, Use this command : npm install ...READ MORE

answered Apr 22, 2020 in Angular by Niroj
• 82,720 points
3,013 views