React -如何引用响应.数据状态?

Question

React新手，很难理解如何从response.data中引用对象数据。考虑下面的代码:

import React, {useRef, useState, useEffect} from "react";
import UserService from "../services/user.service";
import AuthService from "../services/auth.service";

export const getUser = () => {

// Retrieve user info from locally stored JSON
const currentUser = AuthService.getCurrentUser();
const [user, setUser] = useState("");
useEffect(() => {
getUser();
}, []);
const getUser = () => {
// Retrieve user info from DB using user id
UserService.getUser(currentUser.id)
.then(response => {
setUser(response.data); // This is what I what I want to reference
console.log(response.data);
})
.catch(e => {
console.log(e);
});
};
return (
<div>
{user.username}
</div>
);
};

我看到控制台中正确返回的数据:{username: ' glenn泥潭'}

并且使用Webstorm中的调试工具，我看到用户正在加载此值。但是一旦我们开始渲染{user。Username}，没有显示。我做错了什么?

Answer 1

请查看代码，我使用公共API作为数据库，但您可以将其与您的代码相关。我认为你需要使用response.json()，然后设置data。同样，当您将用户设置为对象时，应该将初始useState声明为空对象const [user, setUser] = useState({});。

const {useEffect, useState} = React;
const App = () => {
//const currentUser = AuthService.getCurrentUser();
const [user, setUser] = useState("");
useEffect(() => {
getUser();
}, []);
const getUser = () => {
// Retrieve user info from DB using user id
fetch('https://api.agify.io/?name=Glenn Quagmire')
.then((response) => response.json())
.then((data) => {
setUser(data);
console.log(data)
}).catch(e => {
console.log(e);
});
};
return (
<div>
{user.name}
</div>
);
};
ReactDOM.render(
<App />,
document.getElementById("root")
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 2

我找到了一个答案，在返回块中建模:

return (
<div>
{user && user.map((user, index) => (  
<h1>{user.username}</h1>
))}
</div>
);
};

似乎是一种获得单个数据的迂回方式，但它有效。如果有人有更好的建议，请随时分享。