React：MapStateToProps中重复report属性的重命名方法

嘿，这个场景太常见了！当你用展开运算符处理两个包含同名属性的对象时，后面的对象属性确实会覆盖前面的——这就是你添加resultStatusReport后功能异常的原因。要解决这个问题，我们可以通过对象解构重命名的方式，给两个report属性分别赋予独特的名称，避免冲突。

方案1：仅提取并重命名两个report属性 #

如果ESFReport和resultStatusReport里你只需要这两个report属性，直接在获取对象时解构并重命名即可：

const mapStateToProps = (state) => { 
  const date = new Date(); 
  const year = date.getFullYear(); 
  const month = date.getMonth() + 1; 
  // 解构时将report重命名为esfReport和resultStatusReport
  const { report: esfReport } = getESFReport(state);
  const { report: resultStatusReport } = getResultStatusReport(state);
  
  return { 
    companInfo: getCompanyInfo(state), 
    companyId: getCompanyId(state), 
    esfReport, 
    resultStatusReport,
    year, 
    month, 
  }; 
};

方案2：保留对象其他属性的同时重命名report #

如果这两个对象还有其他需要保留的属性，我们可以把report单独解构重命名，剩下的属性用展开运算符保留：

const mapStateToProps = (state) => { 
  const date = new Date(); 
  const year = date.getFullYear(); 
  const month = date.getMonth() + 1; 
  
  const ESFReport = getESFReport(state);
  const resultStatusReportObj = getResultStatusReport(state);
  
  // 提取report并重命名，同时保留其他属性
  const { report: esfReport, ...restESFProps } = ESFReport;
  const { report: resultStatusReport, ...restResultProps } = resultStatusReportObj;
  
  return { 
    companInfo: getCompanyInfo(state), 
    companyId: getCompanyId(state), 
    // 保留两个对象的其他属性
    ...restESFProps,
    ...restResultProps,
    // 重命名后的report属性
    esfReport, 
    resultStatusReport,
    year, 
    month, 
  }; 
};

这样修改后，你在组件里就可以分别通过this.props.esfReport（类组件）或props.esfReport（函数组件）来访问这两个不同的report属性啦，再也不会有覆盖问题了。

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