JSON 对象属性不可返回 - “无法读取未定义的属性”

Question

好的，所以我在 React 中构建了一个自定义 API。当我拨打电话时，我会取回 JSON 数据并使用 JSON.Stringify 将其存储到本地存储中：

localStorage.setItem('user', JSON.stringify(response.data))

稍后，我将这个项目调用到主页上，以便在用户使用以下方式登录后返回一些数据：

var user = JSON.parse([localStorage.getItem('user')])

这会返回对象：

{
"OrderId":0,
"IsLoggedIn":true,
"ModeOfSaleId":64,
"OriginalModeOfSaleId":64,
"SourceId":8580,
"LoginInfo":{"ConstituentId":190554,"OriginalConstituentId":190554,"UserId":"test@email.org","Status":"P","FailedAttempts":0,"LockedDate":null,"ElectronicAddress":"test@email.org"},
"CartInfo":{"PerformanceCount":0,"PackageCount":0,"ContributionCount":0,"MembershipCount":0,"UserDefinedFeeCount":0,"GiftCertificateCount":0,"PaymentCount":0,"FirstSeatAddedDateTime":null},
"BusinessFacing":false,
"IsGuest":false,
"CheckoutStatus":{"Status":"No Checkout","Date":null},
"HasLockedSeats":false,
"SeatsExpired":false
}

问题：

未嵌套的属性正常返回{user.OrderId} 或{user.ModeOfSaleId} 但是，尝试返回嵌套值如{user.LoginInfo.ConstituentID} 会导致错误：

Uncaught TypeError: Cannot read property 'ConstituentId' of undefined

返回{user.LoginInfo} 实际上会返回一个对象，但显然不能将其打印到字符串中。返回{user.LoginInfo["ConstituentId"]} 会导致错误：

Uncaught TypeError: Cannot read property 'ConstituentId' of undefined

所以是的，我很难过，我不知道我是如何错误地返回这个的。任何帮助表示赞赏。

Answer 1

好的，所以我返回这些值的方式似乎是一个“问题”，因为 React 处理它的 Render 事件的方式。当我在componentDidMount() 事件中提取数据时，Render 事件仍然会在此之前触发。

componentDidMount() {
  this.setState({ 
    user: JSON.parse([localStorage.getItem('user')]),
    users: { loading: true }
  });
}

所以在渲染事件中：

render() {
    const { user, users, loading } = this.state;
    var { ConstituentId, UserId } = user.LoginInfo


    return (
        <div className="col-md-6 col-md-offset-3">
            <h1>Hi!</h1>
            <p>{UserId}</p>
            <p>You're logged in with React & Basic HTTP Authentication!!</p>
            <h3>Users from secure api end point:</h3>
            <p>
                <Link to="/login">Logout</Link>
            </p>
        </div>
    );
}

它会触发两次，一次是在 state.user 由 componentDidMount() 设置之前，然后再一次。因此，我的代码由于第一次触发渲染而出错，当时没有设置任何内容，因此出现了undefined 消息。我想出了如何通过检查登录信息对象返回为typeof object 来绕过这个问题。这是在我的渲染事件中：

var result = (typeof user.loginInfo === 'object');

if (result && loading) {
    console.log(result)
    console.log(user.LoginInfo.ConstituentId)
    var { ConstituentId, UserId } = user.LoginInfo
}

但这不是很优雅。所以，最终我通过创建一个名为 'loading' 的 state prop 重写了我在componentDidMount() 中处理卸载信息的方式：

this.state = {
  loading: true,
  user: {}
};

在componentDidMount() 我正在这样做：

this.setState({ 
  user: JSON.parse(localStorage.getItem('user')),
  loading: false
});

在render():

const { loading, user } = this.state;
if (!loading) {
  var { ConstituentId, UserId } = user.LoginInfo
}
console.log(ConstituentId)

效果很好！

基本上，我只是在等待componentDidMount() 使用loading 状态触发，方法是在函数中将其设置为false。然后我们就知道它已经加载完毕，可以成功渲染数据了。

Answer 2

此代码适用于我：

localStorage.setItem("user", JSON.stringify({
   "OrderId":0,
   "IsLoggedIn":true,
   "ModeOfSaleId":64,
   "OriginalModeOfSaleId":64,
   "SourceId":8580,
   "LoginInfo":{"ConstituentId":190554,"OriginalConstituentId":190554,"UserId":"test@email.org","Status":"P","FailedAttempts":0,"LockedDate":null,"ElectronicAddress":"test@email.org"},
   "CartInfo":{"PerformanceCount":0,"PackageCount":0,"ContributionCount":0,"MembershipCount":0,"UserDefinedFeeCount":0,"GiftCertificateCount":0,"PaymentCount":0,"FirstSeatAddedDateTime":null},
   "BusinessFacing":false,
   "IsGuest":false,
   "CheckoutStatus":{"Status":"No Checkout","Date":null},
   "HasLockedSeats":false,
   "SeatsExpired":false
}));

const user = JSON.parse(localStorage.getItem("user"));

console.log(user.LoginInfo.OriginalConstituentId);

Answer 3

如何使用扩展运算符来得到你想要的？

const user = JSON.parse(localStorage.getItem('user'))
const { ConstituentId, UserId } = user.LoginInfo

console.log(ConstituentId) // 190554