无法解构“response.profileObj”的属性“名称”，因为它未定义

const navigate = useNavigate();

  const responseGoogle = (response) => {

    localStorage.setItem('user', JSON.stringify(response.profileObj));

    const { name, googleId, imageUrl } = response.profileObj;

    const doc = {
      _id: googleId,
      _type: 'user',
      userName: name,
      image: imageUrl,
    };

    client.createIfNotExists(doc).then(() => {
      navigate('/', { replace: true });
    });
  };

我收到“名称未定义”的错误 – 但怎么办？imageUrl and googleId工作正常，那么有什么问题吗name?

我猜您正在从事 ShareMe 项目（） 如我一般。

问题是登录已更新，现在 Google 的服务在响应中返回一组与录制视频时返回的参数不同的参数。

您正在寻找的参数（例如“name”和“id”）现在可以在response.credential中找到，但它已被编码（出于安全原因），现在您必须对其进行解码。您必须使用“npm i jwt-decode”() 在“shareme_frontend”文件夹中安装“jwt-decode”，并且您将能够使用“var generatedHeader = jwt_decode(response.credential);”对其进行解码，您应该能够使用属性“名称”、“子”而不是 ID 和“图片”，这应该可以帮助您加快速度。

您遇到的问题是名称未定义，因为没有response.name，只有response.credential.name并且需要解码。因此，这可能会非常令人沮丧，但当您打印响应时您会看到问题。

sources:

• JWT https://www.npmjs.com/package/jwt-decode
• response.credential 中的“子”属性：https://developers.google.com/identity/openid-connect/openid-connect

我的例子：

import jwt_decode from "jwt-decode";


const responseGoogle=(response)=>{
    localStorage.setItem('user', JSON.stringify(response.profileObj));
    var decodedHeader = jwt_decode(response.credential);
    console.log(decodedHeader);

    const { name, sub, picture } = decodedHeader;

    const doc = {
      _id: sub,
      _type: 'user',
      userName: name,
      image: picture,
    }

    client.createIfNotExists(doc)
      .then(() =>{
        navigate('/', { replace: true })
      })

  }