如何在反應中綁定來自 API 的數據？

Question

我是 React.JS 的新手。 我想在 HTML 代碼中綁定來自 API 的數據。
這是 API 中帶有 axios 的GET方法：

componentDidMount() {
    var token = localStorage.getItem('accessToken');
    var config = {
        headers: { 'Authorization': "Bearer " + token }
    };
    var apiBaseUrl = "https://**********/";
    const that = this;
    axios.get(apiBaseUrl + 'api/Account/UserInfo', config)
        .then(function (response) {
            console.log(response.data);
            if (response.status === 200) {
                that.setState({ userInfo: response.data });
                console.log(that.state.userInfo.Email);
            }
            else {
                console.log(response.data);
            }
        })
        .catch(function (error) {
            console.log(error);
        });
}

控制台顯示我

{Email: "xxxxxxx@yahoo.com", HasRegistered: true, LoginProvider: null}

現在我想在 HTML 中顯示電子郵件地址。 我怎樣才能做到這一點？

Answer 1

在這里你已經設置了狀態

 that.setState({ userInfo: response.data });

要訪問它 - 試試this.state.userInfo.Email

你可以把它放到一些像這樣的html元素中

<p>{this.state.userInfo.Email}</p>

Answer 2

在 JSX 中你可以這樣顯示

render(){
  return (
    <p>{this.state.userInfo ? this.state.userInfo.Email : 'Email is not provided'}</p>
  )
}

Answer 3

在 JSX 中，您只需定義

render(){
const email = this.state.userInfo? this.state.userInfo.Email:'';
return(
  <div>{email}</div>
 )
}