Error: Must use destructuring state assignment

Question

你知道这个错误吗？我收到以下行的 ESlint 错误 visible={this.state.visible}

上面写着："Must use destructuring state assignment"

它使用："eslint-config-airbnb"

提前致谢

import React from 'react'
import { Button, Modal } from 'antd'

class EditProfile extends React.Component {
  state = { visible: false }

  showModal = () => {
    this.setState({
      visible: true,
    })
  }

  handleOk = e => {
    console.log(e)
    this.setState({
      visible: false,
    })
  }

  handleCancel = e => {
    console.log(e)
    this.setState({
      visible: false,
    })
  }

  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>
          Modal Card
        </Button>
        <Modal
          visible={this.state.visible}
          onCancel={this.handleCancel}
          footer={null}
          className="custom-modal-v1"
          centered
        >
          Text
        </Modal>
      </div>
    )
  }
}
export default EditProfile

Answer 1

您只需从状态中解构值，而不是像 this.state.visible 那样使用它。只需使用这样的状态值

  render() {
   //Destructure value from state
   const { visible } = this.state

    return (
      <div>
        <Button type="primary" onClick={this.showModal}>
          Modal Card
        </Button>
        <Modal
          visible={visible}
          onCancel={this.handleCancel}
          footer={null}
          className="custom-modal-v1"
          centered
        >
          Text
        </Modal>
      </div>
    )
  }

希望对您有所帮助！

Answer 2

将您的渲染函数更改为此，然后直接访问可见。这是 es6 解构，您可以在其中将键提取为具有相同名称的变量。阅读更多 here

      render() {
          const { visible } = this.state; // destructing visible form state
          return (
              <div>
                  <Button type="primary" onClick={this.showModal}>
                      Modal Card
                  </Button>
                  <Modal
                      visible={visible}
                      onCancel={this.handleCancel}
                      footer={null}
                      className="custom-modal-v1"
                      centered
                  >
                      Text
                  </Modal>
              </div>
         )
     }

Error: Must use destructuring state assignment

Error: Must use destructuring state assignment

javascript

reactjs

eslint

eslint-config-airbnb