我的handleClick 事件没有按预期工作

Question

handleClick 的功能是简单地执行 this.setState({details: true}) ，当它已经为 true 时反之亦然。控制台日志显示每次单击时详细信息的状态都会在 true 和 false 之间变化，但该行仅显示“无法调用详细信息”

          const retval = (
            <div>
              <hr />
              <div  className="weather-card">
                <h3>City: {this.state.city}</h3> <img onClick={() => this.handleClick()} src={this.state.image} />
                <h3>
                  Temprature: {this.state.temp} Feels Like: {this.state.feels}
                </h3>
                <p>{this.state.w_status}</p>
                <p>{this.state.description}</p>
                <div id="details" className="weather-details">
                  {this.state.details ? "well well well": "Couldnt call the details"}
                </div>
              </div>
              <hr />
            </div>
          );

  async handleClick(e) {

    if(this.state.details == true){
        this.setState({ details: false});
        console.log("It is hidden");
    }
    else{
        this.setState({ details: true});
        console.log("It is shown");

    }
  }

Answer 1

您能否发布整个代码，因为除了重构以优化一点之外，我不明白为什么它不起作用。

优化：

//before return
const { details, city, temp, feels, image } = this.state
// after return
onClick={() => this.setState({ details: !details })