XMLHttpRequest GET 在 React.js 中不起作用

Question

我有一个Profile 课程，像这样：

 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>

        );
    }
}

问题是它没有在控制台中放任何东西。

虽然http://localhost:8080/user/1 在浏览器中返回给我这个：

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

如何解决这个问题？

Answer 1

我可以解决你的问题，你需要用{this.getData();}包装函数调用

可以找到一个例子here

class Profile extends React.Component {
   constructor(props)   {
      super(props);
      this.state = {email:'', userName:'', userID:''};
   }

   getData() {
     var request = new XMLHttpRequest();
     console.log("Inside getData method");

     request.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log(this.responseText);
        }
     };
     request.open('GET', 'https://reqres.in/api/products/3', true);
     request.send();
     console.log(request.responseText);
   }

   render() {
    return(
     <div>
      <h2>You sample output</h2>
        {this.getData()}
      </div>
    );
   }
}



ReactDOM.render(<Profile />, document.querySelector("#container"))

Answer 2

您应该在 componentDidMount 生命周期方法中使用 AJAX 调用填充数据。这样您就可以在检索数据时使用 setState 更新您的组件。

react 文档中的示例

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>
    );
  }
}