Question

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;，但现在无法编译。

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

Answer 1

const在错误的位置。只能在class MyDrawer extends Component {...}内声明类成员，并且不允许在const中声明。销毁分配应驻留在应具有变量的函数中：

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

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

Answer 2

尝试一下：

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;

Reactjs eslint规则必须使用解构状态分配

2 个答案: