在.map循环中使用setstate时未处理的拒绝

setState Unhandled Rejection (TypeError): Cannot read property 'state' of undefined 作为一个错误。

state 设置状态 onClick= {() => this.setState({clicked: !this.state.clicked})} className 的 div className={this.state.clicked ? 'closed' : 'open'}

我以前从来没有遇到过这个问题,但我承认我以前也没有在循环中使用过。

class Rates extends Component {
constructor(props) {
    super(props);
    this.state = {
        dailyRatesDates: [],
        clicked: true,
    }
}
componentDidMount(){
    ... //calling API data and passing as setState to dailyRatesDates
} 

render() {
  return (
    <span>
      {this.state.dailyRatesDates.length > 0 &&
         <WrapperMobile> 
            {this.state.dailyRatesDates.map(function(i,index){
               return(
                  <div key={index}>
                     {i.rate_plans.map(function(j,index){
                        return(
                          <div key={index} className="expander">
                             <h2 onClick= {() => this.setState({clicked: !this.state.clicked})}>
                                <p>{j.name}</p>
                             </h2>
                             <div className={`expander__content ${this.state.clicked ? 'closed' : 'open'}`}>
                                ...
                             </div>
                          </div>
                        )
                      })}
                    </div>
                  )
                })}
             </WrapperMobile>
           </div>
         }
      </span>
    );
  }
}

如果你需要看到更多,那么请告诉我,但这应该为我正在努力实现的目标提供基础,并进一步解决以下问题: ${this.state.clicked ? 'closed' : 'open'}