我如何解构一个 javascript 用户 object 以显示在帐户页面上？

Question

我无法让我的帐户屏幕显示我的数据库中的用户详细信息。 我能够以 object 的形式获取用户详细信息，但我无法将其解构为仅显示 email，或仅显示名称等。

所以，这是 AccountScreen.js 组件。 在进行 API 调用后，我有一个 console.log(result) 并且它正确记录，返回一个用户 object 和 email 和名称。 但是，在我有 {user.email} 的地方，没有任何显示。 如果我只输入{user}，我会得到这个错误代码

“错误：对象作为 React 子项无效（找到：object，键为 {result}）。如果您打算呈现子项集合，请改用数组。”

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Cookies from 'universal-cookie';
const cookies = new Cookies();
const token = cookies.get("TOKEN");


function AccountScreen() {
    const [ user, setUser ] = useState("");
    
    // useEffect executes once the page loads 
    useEffect(() => {
        // set configuration for API call
        const configuration = {
            method: "get",
            url: "MYURL/account",
            headers: {
                Authorization: `Bearer ${token}`,
            },
        };
        axios(configuration)
            .then((result) => {
                console.log(result); 
                //assign the User to the in result to User we initialized
                setUser({result});
            })
            .catch((error) => {
                error = new Error();
            });
    }, []);
  
  return(
    <div className="container">
      <h2>
        Dashboard
      </h2>
      <h3>email:{user.email}</h3>
    </div>
  );
}

export default AccountScreen;

我对后端进行了 API 调用，这是那里的相关代码。 它成功返回一个 object 和 email 和名称，正如我想要的那样。

// authentication endpoint
app.get("/account", auth, (request, response) => {
    User.findOne({email: request.user.userEmail})
        .then((user) => {
            response.status(200).send({
                email: user.email,
                name: user.name,
            })
        })
        .catch((error) => {
            response.status(404).send({
                message: "User not found",
                error,
            })
        });
});

这是 auth 组件，它返回用户 object（包括用户的电子邮件），这是 /account API 用于在数据库中查找帐户的内容。

const jwt = require('jsonwebtoken');

module.exports = async (request, response, next) => {
    try {
        // get the token from the authorization header
        const token = await request.headers.authorization.split(" ")[1];
        // check if token matches the supposed original
        const decodedToken = await jwt.verify(
            token,
            "RANDOM-TOKEN"
        );
        // retrieve the user details of the logged in user 
        const user = await decodedToken;
        // pass the user down to the endpoints here
        request.user = user;
        // pass down functionality to the endpoint
        next();
        
    } catch (error) {
        response.status(401).json({
            error: new Error("Invalid Request!"),
        });
    }
}

总而言之，在我的帐户页面上，它应该在“电子邮件：”旁边显示用户 email，但是，我无法弄清楚如何解构 object 以仅显示那一点信息，目前它在“电子邮件：”旁边的那个页面有一次我正在使用 JSON.stringify 并能够显示信息，但它显示整个 object 作为一个字符串，我只想一次显示 1 个项目。

预先感谢您的帮助！

Answer 1

我想我知道问题出在哪里。在服务器中，这里是您返回的格式

{ 
  email:value,
  name : value
}

所以它是一个具有 2 个属性email和name的对象。

在客户端，您使用的 http 客户端是axios ，因此当您使用axios来抓取服务器发送的数据时，它是通过data属性而不是result ，因为它是您的distructuring syntax中的情况。

所以而不是setUser({result}); 使用setUser({data}); 但是为了让它工作，你应该对你称之为result的响应参数进行结构化，比如.then({data})=>{setUser({data})}因为在axios中，这是让你可以访问数据的属性服务器。

这是解释该data属性的文档： Response Schema

Answer 2

我想到了。 我需要将其设置为 setUser(result;data)。 而不是 ({result})。 我之前曾尝试过此操作，但当时我还在弄乱我的代码的 rest，所以我一定只是解决了我为自己创建的问题。