尽管解构正确（eslint），但解构错误答案

【问题标题】：destructuring error despite correct destructuring (eslint)尽管解构正确（eslint），但解构错误
【发布时间】：2018-10-11 01:09:12
【问题描述】：

我有一堂课：

export default class DepartmentItem extends React.Component {
  render() {
    const {
      name,
      location,
      position,
      salary,
      age,
      citizenship,
      description
    } = this.props.department;
    const { link, tag } = this.props.department.url;
    const { isToggleOn } = this.state;
  }
}

为简洁起见，没有添加构造函数。

尽管破坏了道具，但我仍然收到 eslint 错误说 Muse use destructuring props assignment。我相信我这样做是正确的，并仔细检查了 AirBnB eslint 配置，但错误仍然存在。

我是如何摆脱错误的（修复它，而不是制定规则忽略它）。

【问题讨论】：

尝试直接从this.props.department解构，在description之后添加url: { link, tag}

标签： javascript reactjs ecmascript-6 eslint

【解决方案1】：

不是从this.props.department 中挑选，而是嵌套解构。

const {
  department: {
    name,
    location,
    position,
    salary,
    age,
    citizenship,
    description,
    url: {
      link, tag
    }
  } = this.props;

【讨论】：