React JSX嵌套map结合filter出现Cannot read properties of undefined错误

错误根源 #

你在第一个map中使用了普通函数function(item, i)，这类函数会创建独立的this上下文，不再指向React组件实例，导致嵌套代码里访问this.state时出现undefined错误。

另外还有一处逻辑错误：filter条件client.includes(item)不成立，因为client是对象（示例中为{site: 'site1', client: 'client1'}），应该通过client.client === item来匹配客户端名称。

修复后的代码 #

<Col xs="12" sm="12" md="12" lg="12">
    <Row>
        {this.state.watchdog ?
            // 替换为箭头函数，继承外层组件的this指向
            this.state.uniqueClients.map((item, i) => {
                // 提前筛选数据，减少重复计算
                const filteredData = this.state.watchdog.filter(client => client.client === item);
                return (
                    <li key={i}>{item}
                        {filteredData.map((filteredClient, idx) => (
                            <React.Fragment key={idx}>
                                <DataGrid id={`grid-container-${i}-${idx}`}
                                    dataSource={filteredClient}
                                    keyExpr="ID"
                                    showBorders={true}
                                >
                                    <Column dataField="Prefix" width={70} caption="Title" />
                                    <Column dataField="FirstName" />
                                    <Column dataField="LastName" />
                                    <Column dataField="Position" width={170} />
                                    <Column dataField="State" width={125} />
                                    <Column dataField="BirthDate" dataType="date" />
                                    <MasterDetail
                                        enabled={true}
                                        component={DetailTemplate}
                                    />
                                </DataGrid>
                            </React.Fragment>
                        ))}
                    </li>
                )
            })
            : null}
    </Row>
</Col>

额外优化点 #

• 给内部React.Fragment添加唯一key，避免React渲染警告
• 给DataGrid的id添加索引后缀，避免DOM元素id重复
• 若组件是类组件，可在构造函数中绑定第一个map的函数（不过箭头函数更简洁）；若是函数组件，建议用useMemo缓存筛选后的filteredData提升性能

内容的提问来源于stack exchange，提问作者user19019404