不能使用 this.state 因为我使用 eslint，“必须使用解构状态赋值”/解构赋值反应

Question

i got some error because i using some this.setState statement, because of that i can't call my statement.

i got error here on this.state.show

handleClick() {
    this.setState({ show: !this.state.show });   <<<------EROR HERE
  }

and this my full code

    class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = { show: false };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ show: !this.state.show });
  }

  render() {
    return (
      <HeroStyles>
        <Zoom>
          <div className="container">
            <div className="Kotak">
              <h1 className="heading">
                <span> this is hello </span>
                <h2>
                  stay{' '}
                  <span>
                    <Typewriter
                      loop={0}
                      cursor
                      cursorStyle="_"
                      delaySpeed={3000}
                      words={['Positive', 'Negative']}
                    />
                  </span>{' '}
                  <span>
                    <Typewriter
                      loop={1}
                      cursor
                      cursorStyle="_"
                      delaySpeed={3000}
                      words={['Kawan']}
                    />
                  </span>
                </h2>
              </h1>
              <Zoom delay={500}>
                <div className="foto">
                  waymo
                  <div className="lingkaran" />
                  <img src={foto} alt="" onClick={this.handleClick} />
                  Guna Dharma
                </div>
              </Zoom>
              <Zoom opposite when={this.state.show}>
                <h1>React Reveal</h1>
              </Zoom>
            </div>
          </div>
        </Zoom>
      </HeroStyles>
    );
  }
}

export default Hello;

Answer 1

You have the destructuring-assignment rule in place.

Enforce consistent usage of destructuring assignment of props, state, and context (react/destructuring-assignment)

You have to destructure what you want from the state first:

handleClick() {
  const { show } = this.state;
  this.setState({ show: !show });
}

If you don't want to do this, you can disable the rule from ESLint.

Answer 2

The eslint rule destructuring-assignment is what enforces this.

But you have bigger problems than that, because you should not read this.state during a setState() , if you want to be sure you'll get the correct values (because React component state may be set asynchronously .)

Pass a function instead, with the (current) state as its parameter:

  handleClick() {
    this.setState(state => { 
        return {show: !state.show } // not this.state.show
    });
  }