在我觀看的項目中，他們使用類組件，但我想使用鉤子使用功能組件來執行這些操作。你們能如何幫助我？我嘗試了很多次，但無法完成這個翻譯。我還在努力我的代碼（導入的數據是“成分”）：class App extends React.Component {  constructor(props) {    super(props)    this.state = {      ingredients: [],      totalPrice: 0    }    this.addIngredients = this.addIngredients.bind(this)    this.removeIngredients = this.removeIngredients.bind(this)    this.calculateTotal = this.calculateTotal.bind(this)  }  addIngredients(product) {    this.setState({      ingredients: [...this.state.ingredients].concat([        { ...product, displayId: Math.random() }      ])    })  }  removeIngredients(product) {    const selectedProduct = this.state.ingredients.find((ingredient) => {      return ingredient.name === product.name    })    const targetId = selectedProduct.displayId    this.setState({      ingredients: this.state.ingredients.filter((ingredient) => {        return ingredient.displayId !== targetId      })    })  }  calculateTotal() {    let total = 4    this.state.ingredients.forEach((item) => {      total += item.price    })    return total.toFixed(2)  }  render() {    return (      <div>        <Hamburger ingredients={this.state.ingredients} />        <TotalPrice total={this.calculateTotal} />        <ItemList          items={ingrediends}          addIngredients={this.addIngredients}          removeIngredients={this.removeIngredients}          selectedIngredients={this.state.ingredients}        />      </div>    )  }}export default App