प्रोजेक्ट में मैं देखता हूं, वे क्लास घटक के साथ काम करते हैं, लेकिन मैं इन कार्यों को हुक का उपयोग करके कार्यात्मक घटक के साथ करना चाहता हूं। आप लोग मेरी मदद कैसे कर सकते हैं? मैंने कई बार कोशिश की लेकिन यह अनुवाद नहीं कर सका। मैं अभी भी कोशिश कर रहा हूँ

मेरा कोड (आयातित डेटा "सामग्री" है):

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
-1
Alex Thiam 4 नवम्बर 2020, 02:28

1 उत्तर

सबसे बढ़िया उत्तर

नवारो मुझे आशा है कि यह आपकी मदद करेगा! मैं इसका परीक्षण नहीं कर सका लेकिन क्या आपके लिए अच्छी शुरुआत है, मैं 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;
0
Yoandry Collazo 4 नवम्बर 2020, 00:13