Question

在我观看的项目中，它们使用类组件，但是我想使用挂钩对功能组件执行这些操作。你们如何能帮助我？我尝试了很多次，但是无法翻译。我还在尝试

我的代码（导入的数据是“成分”）：

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

Answer 1

Navarrro希望对您有所帮助！我无法测试它，但对您来说是个好的开始，我使用ES6语法...

import React, { useState } from 'react';
import { Hamburger, TotalPrice, ItemList } from './SuperComponents.jsx';

const App = () => {
    const [ingredients, setIngredients] = useState([]);
    // You are not using this state
    // const [totalPrice, setTotalPrice] = useState(0);

    const addIngredients = (product) => {
        setIngredients([...ingredients, { ...product, displayId: Math.random() }]);
    };

    const removeIngredients = (product) => {
        const selectedProduct = ingredients.find(
            (ingredient) => ingredient.name === product.name
        );

        const { targetId } = selectedProduct;
        setIngredients(
            ingredients.filter((ingredient) => ingredient.displayId !== targetId)
        );
    };
    const calculateTotal = () => {
        let total = 4;
        ingredients.forEach((item) => (total += item.price));
        return total.toFixed(2);
    };
    return (
        <>
            <Hamburger ingredients={ingredients} />
            <TotalPrice total={() => calculateTotal()} />
            <ItemList
                items={ingredients}
                addIngredients={(i) => addIngredients(i)}
                removeIngredients={(i) => removeIngredients(i)}
                selectedIngredients={ingredients}
            />
        </>
    );
};

export default App;

如何在React.js项目中将类组件转换为功能组件？

1 个答案: