Question

我在Reactjs中有一个用户详细信息页面，我在这里获取用户详细信息并将其填充到相应的字段中。但是我无法从用户对象访问键值。

我的示例代码是

function EditProfile(props) {
    const [user, setUser] = useState()
    useEffect(() => {
        const fetchUserInfo = async () => {
            const profileConfig = {
                method: 'GET',
                headers: {
                    'Authorization': 'Bearer ' + auth.token
                }
            };
            fetch(`http://localhost:4000/api/v1/user/me`, profileConfig)
            .then(response => response.json())
            .then(response => {
                console.log("response: ", response.user);
                if (response.success === true) {
                    setUser(response.user)
                } else {
                    alert(response.message)
                }
            },
            (error) => {
                alert('User fetching faied: ' + error)
            })
        }
        fetchUserInfo()
    }, [])

    return (
       <div>{user.name}</div>
    )
}

服务器的响应（用户对象是）

{
  "status": true,
  "_id": "5ecfdc403165f709b49a4a0e",
  "name": "Anand OL",
  "gender": "male",
  "dob": "2020-12-13T00:00:00.000Z",
  "email": "anand@gmail.com",
  "phone": "1234567890",
  "createdAt": "2020-05-28T15:44:00.700Z",
  "updatedAt": "2020-06-01T08:38:37.902Z",
  "__v": 136,
  "image": "5ecfdc403165f709b49a4a0e_Image.png"
}

当我尝试从user.name之类的用户对象访问名称时我收到错误未定义用户

Answer 1

在获取过程中，您需要提供一些初始状态以显示（或有条件地渲染）。

const [user, setUser] = useState(); // <-- user is undefined!!

有条件地呈现用户界面

return <div>{user && user.name}</div>;

或

return user ? <div>{user.name}</div> : null;

注意：请谨慎使用前者，因为并非所有虚假值都被创建为相等，即考虑return <div>{value && value.property}</div>，如果/当value = 0为虚假值时，则实际上是“ 0”呈现。

或者您可以提供一些默认状态

const [user, setUser] = useState({ name: '' });

获取后无法从React.js中的对象访问访问键值

1 个答案: