尽管进行了正确的解构（eslint），但仍然存在解构错误

Question

I have a class:

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;
  }
}

For brevity the constructor is not added.

Despite destructuring the props i still get the eslint error saying Muse use destructuring props assignment . I believe I did this correctly, and double checked against the AirBnB eslint configs, but the error remains.

How did I get rid of the error (fixing it, not making a rule to ignore it).

Answer 1

Instead of picking from this.props.department , just nest the destructuring.

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