无法读取 null 的属性 - 对象数组上的三元运算符答案

【问题标题】：Cannot ready property of null - Ternary operator on an array of objects无法读取 null 的属性 - 对象数组上的三元运算符
【发布时间】：2020-01-29 22:40:11
【问题描述】：

我目前正在表中映射一个名为ProfileDetails 的对象数组。在表格底部，我有一个按钮，您可以在其中决定accept 这些详细信息。我试图做一个三元运算符来拥有按钮disabled，除非 ProfileDetails 有一个 TransacationType End。 TransactionType.Name === "End"。我得到TransactionType 为空。一些用户的数组中的对象可能多于或少于 4 个。

这是我尝试过的：

           <Grid item xs={2}>
                    <Grid
                        container
                        justify="center">
                        <Grid item>
                           {ProfileDetails
                                .TransactionType
                                .Name ===
                            "End" ? ( 
                            <Button
                                variant="contained"
                                color="primary"
                                onClick={
                                    handleApprove
                                }>
                                Approve
                            </Button>
                            ) : ( 
                            <Button
                                variant="contained"
                                color="primary"
                                disabled>
                                Approve
                            </Button> 
                             )} 
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>

其中一个数组的示例：

(4) [{…}, {…}, {…}]
0: {ProfileID: 476, Location: Home,  TransactionType: {Name: "LogIn", ShortName: null, ID: 1}
1: {ProfileID: 476, Location: Home,  TransactionType: {Name: "LogOut", ShortName: null, ID: 1} 
2: {ProfileID: 476, Location: Home,  TransactionType: {Name: "Break", ShortName: null, ID: 1}
3: {ProfileID: 476, Location: Home,  TransactionType: {Name: "End", ShortName: null, ID: 1}                                                        
 "

【问题讨论】：

标签： javascript arrays reactjs mapping

【解决方案1】：

如果ProfileDetails 是您数组中的一项，请更改

ProfileDetails.TransactionType.Name === 'End' ? a : b

到

ProfileDetails.TransactionType
  && ProfileDetails.TransactionType.Name === 'End' ? a : b

如果ProfileDetails 是数组，并且当您的数组包含End TransactionType（否则为b）时，您希望显示a，则映射交易类型名称并检查它是否包含'End':

ProfileDetails.map(p => p.TransactionType.Name).includes('End') ? a : b

【讨论】：

改成这样的？ {ProfileDetails.TransactionType && ProfileDetails.TransactionType.Name ===End" ? ... 如果是这样，我仍然收到 Null 的 TranscationType
a 和 b 是每个案例的 <Button>s，但我认为将它们包含在答案中没有任何意义。这是一个常见问题，通常由辅助函数解决，例如来自lodash 的_.get(a, 'b.c.d')，当b 或c 是null 或undefined 时返回undefined。如果定义了a.b.c.d，显然会返回d。
对 a 和 b 是按钮，整个代码太长而无法容纳。我当前的设置是 profileDetails.TransactionType && profileDetails.TransactionType.Name === "End" ？（按钮 a）：（按钮 b）。仍然得到空属性
是的，对不起，我没有注意到你的平等。但无论如何，如果a 是真实的，a && b 将返回b。所以你上面的问题的答案是："yes"。我更新了答案。
“仍然获得null 属性”是什么意思？你能显示确切的错误吗？或者提供一个有效的codesandbox.io？

【解决方案2】：

您永远不会指定数组中的哪个元素要读取TransactionType 的属性。您需要定位 ProfileDetails[0].TransactionType.Name 之类的内容或映射数组中的每个对象，例如：

{ProfileDetails.map(profile => {
    profile.TransactionType.Name === "End" ?
    (<Grid item>
        <Button enabled>
    </Grid>) :
    (<Grid item> 
        <Button disabled>
    </Grid>)
})}

再次阅读您的问题和 cmets，如果数组中的一个对象具有“结束”属性，您似乎真正想要做的是显示启用按钮，否则显示禁用按钮。在这种情况下，您只需将.map 换成.some。在每种情况下，您可能必须 return 网格项才能使其正常工作。

【讨论】：