कार्ट में उत्पाद जोड़ते समय दो घटक एक-दूसरे से बात करते हैं (घटक # 1), सेवा के माध्यम से सेटस्टेट को अपडेट करें (घटक # 2)।

कार्ट में उत्पाद जोड़ते समय, यह कहते हुए एक त्रुटि लौटती है कि मेरे पास घटक # 1 के निर्यात फ़ंक्शन तक पहुंच नहीं है।

#1 घटक

import React, { useContext, useEffect } from 'react';
import Link from 'next/link';

import { Clipboard } from 'react-feather';
import { OrderCartButton } from './styles';
import OrderService from '~/services/orderservice';

import Context from '~/utils/context';

function OrderCart() {
  const { state, actions } = useContext(Context);

  function updateQty() {
    const qty = OrderService.count();
    actions({ type: 'setState', payload: { ...state, value: qty } });
  }

  useEffect(() => {
    updateQty();
  }, []);

  return (
    <>
      <Link href="/order">
        <OrderCartButton data-order-qty={state.value}>
          <Clipboard />
        </OrderCartButton>
      </Link>
    </>
  );
}

export default OrderCart;

#2 घटक

import { reactLocalStorage } from 'reactjs-localstorage';
import { toast } from 'react-toastify';

class OrderService {
  async add(product) {
    const oldorder = reactLocalStorage.getObject('_order_meumenu');

    if (oldorder.length) {
      const merged = [...oldorder, ...product].reduce(
        (r, { id, qty, title, description, price, image }) => {
          const item = r.find((q) => q.id === id);
          if (item) item.qty += qty;
          else r.push({ id, qty, title, description, price, image });
          return r;
        },
        []
      );
      await reactLocalStorage.setObject('_order_meumenu', merged);
    } else {
      await reactLocalStorage.setObject('_order_meumenu', product);
    }
    toast.success('Produto adicionado ao Pedido');
    const qty = await this.count();
    return qty;
  },

  async count() {
    const order = reactLocalStorage.getObject('_order_meumenu');
    return order.length || 0;
  },
}

export default OrderService;

घटक #3 - संदर्भ कॉलबैक में ले जाया गया

import React, { useState, useContext } from 'react';

import { Plus, Minus } from 'react-feather';
import { ProductContainer } from './styles';

import currency from '../../utils/currency';

import OrderService from '~/services/orderservice';
import Context from '~/utils/context';

function Product(product) {
  const { state, actions } = useContext(Context);

  const [qty, setQty] = useState(1);

  function addProductOrder(elem, elemQty) {
    // eslint-disable-next-line no-param-reassign
    const newElem = [];
    newElem.push({ ...elem, qty: elemQty });
    OrderService.add(newElem).then((val) =>
      actions({ type: 'setState', payload: { ...state, value: val } })
    );
  }

  return (
    <ProductContainer>
      <div className="product-image">
        <img
          className="image"
          src={product.image}
          alt={product.title}
          data-product-image
        />
      </div>

      <div className="product-details">
        <div className="product-top">
          <div className="product-title">
            <span className="title" data-product-title>
              {product.title}
            </span>
            <span className="desc" data-product-desc>
              {product.description}
            </span>
          </div>

          <button
            type="button"
            className="product-add"
            onClick={() => addProductOrder(product, qty)}
          >
            <span className="btn -icon -rounded" title="Add Produto">
              <Plus className="icon" />
            </span>
          </button>
        </div>

        <div className="product-bottom">
          <div className="product-qty">
            <div className="product-control-number">
              <Minus className="icon" onClick={() => setQty(qty - 1)} />
              <input
                className="input"
                type="number"
                min="1"
                max="9"
                value={qty}
                readOnly
                data-number-value
              />
              <Plus className="icon" onClick={() => setQty(qty + 1)} />
            </div>
          </div>

          <div
            className="product-price"
            data-product-price={product.price}
            data-product-totalprice="9"
          >
            {currency(product.price)}
          </div>
        </div>
      </div>
    </ProductContainer>
  );
}

export default Product;
0
SHARKDEV 27 जिंदा 2021, 18:38
मैं रिएक्ट स्टेट या स्टेट मैनेजमेंट लाइब्रेरी का उपयोग करने की सलाह देता हूं ताकि आपको मैन्युअल रूप से अपडेट को ट्रिगर न करना पड़े। कहा जा रहा है, आपके कोड में समस्या यह है कि आपको ऑर्डरकार्ट घटक के बगल में updateQty फ़ंक्शन आयात करना चाहिए: import OrderCart, { updateQty } from '~/components/OrderCart';
 – 
Chris
27 जिंदा 2021, 18:50
मैंने बदलाव किया है, लेकिन यह उसी त्रुटि वापसी के साथ जारी है।
 – 
SHARKDEV
27 जिंदा 2021, 18:56

1 उत्तर

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

ठीक करने के लिए कुछ चीज़ें हैं:

import OrderCart from '~/components/OrderCart';
// ...
OrderCart.updateQty();

~/components/OrderCart में डिफ़ॉल्ट निर्यात वर्ग घटक (OrderCart) है और updateQty उसी फ़ाइल में एक और कार्य है, इसलिए आयात विवरण कुछ ऐसा होना चाहिए:

import { updateQty } from '~/components/OrderCart';

और उपयोग होना चाहिए

updateQty()

लेकिन यह काम नहीं करेगा क्योंकि किसी ऑब्जेक्ट को वापस करने वाले फ़ंक्शन को कॉल करने से पुन: प्रस्तुत नहीं होगा।

इसलिए, इसे ठीक करने के लिए आपको चाइल्ड कंपोनेंट को कॉलबैक पास करना चाहिए जो add फ़ंक्शन को कॉल करता है, और add को कॉल करने के बाद कॉलबैक को कॉल करता है।

बच्चे को प्रॉप्स के रूप में पास करने के लिए कॉलबैक फ़ंक्शन handleUpdateQty हो सकता है।

1
Ramesh Reddy 27 जिंदा 2021, 18:53
क्या आप मुझे दिखा सकते हैं कि कॉलबैक कैसे निष्पादित करें, हैंडलअपडेटक्यूटी पहुंच योग्य नहीं है।
 – 
SHARKDEV
27 जिंदा 2021, 18:55
handleUpdateQty को उस बच्चे के प्रोप के रूप में पास करें जो add फ़ंक्शन को कॉल करता है। अगर add को कॉल करने वाला घटक OrderCart का बच्चा नहीं है, तो आप का इस्तेमाल कर सकते हैं Context.
 – 
Ramesh Reddy
27 जिंदा 2021, 18:59
मैं रिएक्टजेएस में एक नौसिखिया हूं, मैं PHP से आया हूं, अगर मैं मदद कर सकता हूं, तो मैं इन जटिल चरणों में पीटा जा रहा हूं
 – 
SHARKDEV
27 जिंदा 2021, 19:06
अपना प्रश्न संपादित करें और उस घटक को जोड़ें जो add फ़ंक्शन को कॉल करता है।
 – 
Ramesh Reddy
27 जिंदा 2021, 19:07
इसे देखें और संदर्भ जोड़ें। अनिवार्य रूप से, आपको केवल संदर्भ में qty स्थिति बनाए रखने की आवश्यकता है और OrderCart और Product को उत्पादों तक पहुंचने/अपडेट करने के लिए संदर्भ का उपयोग करना चाहिए।
 – 
Ramesh Reddy
27 जिंदा 2021, 19:34