Reactstrap 模态

Question

我想利用reactstarp modal。我也在项目eslintrc中使用它。我正在显示这样的错误 Line 17: Unused state field: 'modal' react/no-unused-state Line 26: Unused state field: 'modal' react/no-unused-state

这是我的代码

class AccountModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false,
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    const { state } = this.state;
    this.setState({
      modal: !state.modal,
    });
  }

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

    return (
      <div>
        <Button color="danger" onClick={this.toggle}>Delete account</Button>
        <Modal isOpen={state.modal} toggle={this.toggle}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody>
            Deleting your account will remove all of
            your information from our database.
            This cannot be undone.
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.toggle}>Delete Account</Button>
            {' '}
            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

我不知道为什么这个状态是未使用的。我已经从 reactstarp 文档中复制了上面的代码。

Answer 1

您没有正确访问状态。试试看；

toggle() {
    const { modal } = this.state;
    this.setState({
      modal: !modal,
    }); 
}

您应该也可以像在 render 方法中一样访问 modal 属性。

说明

const { state } = this.state;

这意味着您正在“this.state”中寻找名称为“state”的属性，

this.state = {
   modal: false,
};

而“this.state”中只有一个名为“modal”的属性。