Блог

Я работаю над личным / бизнес-проектом. Я пытаюсь предоставить клиентам цитату на моем веб-сайте. Есть возможность добавлять пакеты и дополнения. Как только загружается компонент finalquote, он вычисляет общее количество на основе количества часов, сохраненных в моем файле контекста как this.state .часы.

Проблема, с которой я сталкиваюсь, заключается в том, что он выполняет вычисление, даже если часы изменились. Например, когда я нажимаю admin dashboard addon и перехожу на следующую страницу, он добавляет сумму, когда я перемонтирую компонент, он добавляет ту же сумму, даже если я не изменил и не добавил никаких часов к переменной.

 import React, { useState, useEffect, useContext, useRef } from 'react';
import { ProductContext } from '../pages/oniContext';
import { Container, Badge } from 'reactstrap';
import {
  Subtitle,
  Description,
  Titlespan2,
} from '../components/common/title/index';
import { total } from '../components/total';
export const FinalQuote = () => {
  const { hours, setTotal,total,activeAddOns, } = useContext(ProductContext);
  const prevCountRef = useRef();
  

  useEffect(() => {
    alert('Run');
    console.log(hours, 'Final Quote Run', total);
    setTotal();
    console.error(hours);
  }, [hours]);

  return (
    <section className="testimonial-wrapper gradient-color" id="testimonial">
      <Container>
        <div className="main-title-wrapper">
          <Subtitle Class="site-subtitle gradient-color" Name="Your Quote" />
          <Titlespan2
            Class="sitemain-subtitle"
            Name={`$${Math.round(total)}`}
          />
          <Description
            Class="site-dec"
            Name="The Shown Price is only an estimate and may increase or decrease based on demand and extent of work"
          />
          {activeAddOns.map((service, index) => (
            <Badge color="info" pill>
              {service.title}
            </Badge>
          ))}
        </div>
      </Container>
    </section>
  );
};
  

Общая функция набора контекста

 setTotal = () => {
    if (this.state.hours > 0) {
       this.setState((prevState) => {
         if (prevState.hours === this.state.hours) {
           console.log(prevState.hours);
         }
         return {
           total: this.state.total   this.state.hours * ratePerHour * Math.PI,
         };
       });
      console.log(this.state.total, ' ', this.state.hours, '*', ratePerHour);
    }
    
  };