Reactjs eslint 规则必须使用解构状态赋值答案

【问题标题】：Reactjs eslint rule must use destructuring state assignmentReactjs eslint 规则必须使用解构状态赋值
【发布时间】：2018-09-29 04:18:13
【问题描述】：

class MyDrawer extends Component {
  const modalOpen = this.state;

  render() {
    return (
      <div>
        <Drawer
          modal
          open={this.state.modalOpen} // <-- this line show error [eslint] Must use destructuring state assignment (react/destructuring-assignment)
          onClose={() => this.setState({ modalOpen: false })}
        >
        </Drawer>
      </div>
    );
  }
}

export default MyDrawer;

我尝试将行更改为const { modalOpen } = this.state;，但现在编译失败。

如何遵循规则并编辑我的代码以成功编译？

【问题讨论】：

这个问题首先是针对 JS 的。你随便选了个地方放const，不能放在那里。

标签： javascript reactjs eslint

【解决方案1】：

试试这个：

class MyDrawer extends Component {
  const { modalOpen } = this.state; //fixed

  render() {
    return (
      <div>
        <Drawer
          modal
          open={ modalOpen } // fixed
          onClose={() => this.setState({ modalOpen: false })}
        >
        </Drawer>
      </div>
    );
  }
}

export default MyDrawer;

【讨论】：

修复这两行后， const { modalOpen } = this.state;仍然显示相同的错误 SyntaxError: \src\MyDrawer.js: Unexpected token (18:8)

【解决方案2】：

const 放错地方了。在class MyDrawer extends Component {...} 中只能声明类成员，而const 是不允许的。解构赋值应该驻留在一个变量应该可用的函数中：

  render() {
    const { modalOpen } = this.state;

    return (
      <div>
        <Drawer
          modal
          open={modalOpen}
          onClose={() => this.setState({ modalOpen: false })}
        >
        </Drawer>
      </div>
    );
  }

【讨论】：