已使用解构仍触发react/destructuring-assignment lint错误原因咨询

你触发这个错误的核心原因是：react/destructuring-assignment规则要求所有props的访问必须通过解构完成，不能直接使用props.xxx的形式。你当前的代码虽然做了解构，但先直接访问了props.cardContentData和props.cardData这两个props子属性，不符合规则要求。

两种可行的修复方式： #

方式一：分步解构

先把props里的cardContentData和cardData解构出来，再处理内部属性：

// 第一步：解构props中的子属性
const { cardContentData, cardData } = props;
// 第二步：处理嵌套属性，重命名description避免变量冲突
const { imageName, header, description } = cardContentData || {};
const { description: cardDescription, content = [] } = cardData || {};

方式二：嵌套解构一步完成

直接在props上做嵌套解构，同时给嵌套对象设置默认空对象，避免访问undefined属性：

const {
  cardContentData: { imageName, header, description = '' } = {},
  cardData: { description: cardDescription, content = [] } = {}
} = props;

规则说明 #

react/destructuring-assignment的props子规则（默认启用）强制要求：组件接收的props必须通过解构获取，禁止直接使用props.xxx访问属性。你原来的代码中props.cardContentData属于直接访问props属性，因此触发了lint错误。

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