React调用this.props.promotions.filter报错无法访问filter属性求助

1. mapStateToProps 导出字段和调用时的字段名不匹配：你在 mapStateToProps 中定义的导出字段是单数的 promotion: state.promotion，但在给Home组件传参时用的是复数的 this.props.promotions，该props不存在，值为undefined，调用filter方法自然报错。
2. 缺少边界情况处理：即使字段名匹配，若redux数据还未加载完成、或filter结果为空数组，直接取[0]也可能得到undefined，引发后续组件渲染报错。
3. 注意同逻辑下其他字段的一致性问题：你调用campsites数组时用的是this.props.campsites.campsites，说明redux中每个模块都是外层对象包裹内层数组的结构，要保证promotions、partners的取值层级一致。

步骤1：修正mapStateToProps字段命名 #

统一使用复数命名，和其他字段保持风格一致：

const mapStateToProps = state => {
    return {
        campsites: state.campsites,
        comments: state.comments,
        partners: state.partners,
        promotions: state.promotions // 把原来的单数promotion改为复数promotions
    }
}

步骤2：修正传参逻辑，添加边界处理 #

用可选链?.避免undefined报错，用空值合并运算符??设置兜底默认值：

const HomePage = () => {
    return (
        <Home
            campsite={this.props.campsites?.campsites?.filter(campsite => campsite.featured)?.[0] ?? null}
            promotion={this.props.promotions?.promotions?.filter(promotion => promotion.featured)?.[0] ?? null}
            partner={this.props.partners?.partners?.filter(partner => partner.featured)?.[0] ?? null}
        />
    );
};

步骤3：修正CampsiteWithId中的数组取值逻辑 #

你之前直接对this.props.campsites调用filter是错误的，该值是redux模块对象，不是数组，需要取内层的campsites数组：

const CampsiteWithId = ({match}) => {
    return (
        <CampsiteInfo 
            campsite={this.props.campsites?.campsites?.filter(campsite=> campsite.id === +match.params.campsiteId)?.[0] ?? null}
            comments={this.props.comments.filter(comment => comment.campsiteId === +match.params.campsiteId)}
            addComment={this.props.addComment}
        />
    );
};

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