Reactjs 使用React钩子将类组件转换为无状态组件

我很难更改下面的代码以合并react钩子

我尝试了以下多个教程以及阅读有关堆栈溢出的文章

class App extends Component {
  constructor() {
    super();
    this.state = {
      isFlipped: false
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();
    this.setState(prevState => ({ isFlipped: !prevState.isFlipped }));
  }

  render() {
    return (
      <div>
        <ReactCardFlip isFlipped={this.state.isFlipped} flipDirection="horizontal">
        <BusinessCard key="front">
          This is the front of the card.
          <button onClick={this.handleClick}>Click to flip</button>
        </BusinessCard>

        <BusinessCardBack key="back">
          This is the back of the card.
          <button onClick={this.handleClick}>Click to flip</button>
        </BusinessCardBack>
      </ReactCardFlip>
      </div>
    );
  }
}

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
isFlipped:错误
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（e）{
e、 预防默认值（）；
this.setState（prevState=>（{isFlipped:！prevState.isFlipped}））；
}
render（）{
返回(
这是卡片的正面。
点击翻转
这是卡片的背面。
点击翻转
);
}
}

---

我希望将其转换为包含React钩子，以便将React组件类转换为React组件函数，您必须这样做

函数应用程序（）{
常量[isFlipped，setFlipped]=useState（false）；
常量handleClick=（）=>{
setFlipped（prevState=>（{isFlipped:！prevState.isFlipped}））；
};
返回(
这是卡片的正面。
点击翻转
这是卡片的背面。
点击翻转
);
}

更新：

• 不需要使用默认值

• 在更新

  新状态时，我们应该在setState中使用回调模式，该值取决于
  以前的状态
  

检查此项-