无法获取属性，因为在 null 或 undefined [1] 中缺少声明预期键/值类型的索引签名

Posted 2023-03-08

【中文标题】无法获取属性，因为在 null 或 undefined [1] 中缺少声明预期键/值类型的索引签名

【英文标题】：Cannot get property because an index signature declaring the expected key / value type is missing in null or undefined [1]

【发布时间】：2021-10-11 01:21:48

【问题描述】：

我正在测试PermissionDetail 组件，它有graphql 片段，即PermissionTable 组件节点的数据。从查询 const permissionDetail = data.viewPermissionScheme?.grantGroups[0].grantHolders?.edges[0].node.permission; 获取模拟数据时，我在这一行中遇到流类型错误。

组件层次结构：

App -> PermissionTable（分页组件片段）-> PermissionDetail（片段）

    const TestRenderer = () => 
        const data = useLazyLoadQuery<examplesPermissionQuery>(
            graphql`
                query examplesPermissionQuery @relay_test_operation 
                    viewPermission(id: "test-scheme-id") 
                        ... on PermissionView 
                            groups 
                                holders(first: 10) 
                                    edges 
                                        node 
                                            permission 
                                                ...permissionDetailsFragment
                                            
                                        
                                    
                                
                            
                        
                    
                
            `,
            ,
        );

// Getting Flowtype Error here: Cannot get `data.viewPermission?.groups[0]` because an index signature declaring the expected key / value type is missing in  null or undefined [1]
    
        const permissionDetail =
         data.viewPermissionScheme?.grantGroups[0].grantHolders?.edges[0].node.permission; 
    
        return permissionDetail ? (<PermissionDetails permissionDetail=permissionDetail/>) : null;
    ;

测试此类组件的正确方法是什么？我是 flow 和 graphql 和中继的新手。所以需要了解测试这个的最佳方法。

【参考方案1】：

我认为错误只是data.viewPermission?.groups 可以是null 或undefined。因此，您不能访问此属性的 (y) 索引。解决此问题的一种方法是使用 data.viewPermission?.groups?[0] 访问该属性。

您还可以在 GraphQL 架构中使 groups 不可为空。有些人喜欢很多可为空的字段，因为这允许服务器在发生错误时返回尽可能多的部分数据。但是对于开发人员来说，这意味着必须检查每个字段是否有 null。