React updating state/setState in.map 导致死循环

Question

I realize that setTotal(newState) is causing an infinite loop because when it gets updated, it re-renders > causes the function 'showDiscounted' to be called again > state gets updated > and it just goes on forever.

I know that I have to use useEffect to stop this issue, but I'm just not quite sure how I can implement it. I've thought about using useRef because it doesn't cause rerender, but I need it to rerender to show the state 'total' somewhere else. What is the best way to go about this?

import { useEffect, useState } from "react";

const QuoteCalcBot = ({ parts, setParts, option, discount }) => {

    const [total, setTotal] = useState([0,0,0]);
    const [discountedTotal, setdiscountedTotal] = useState([0,0,0]);

    //change individual discount for a part
    const handleDiscountChange = (part, e) => {
        console.log(e.target.value);
        console.log(part);
    }

    //takes in the full price then shows the discounted price of a part. Also adds up the discounted price to discountedTotal for displaying it later
    const showDiscounted = (price) => {
        const temp = Math.ceil((price * ((100 - discount) / 100)) / 36)
        const newState = discountedTotal.map((t, i) => i === option? t + temp : t)
        console.log(newState);
        setTotal(newState); //this causes infinte loop ERROR
        return (
            <div className="col-2">
                {temp}
            </div>
        )
    }

    const addToTotal = (price) => {
        //we need to add the full prices to total so it can display
        return (
            Math.ceil(price / 36)
        )
    }


    //this also works.
    //const showParts = (activeIndex) => { return parts.map(part => part.active[activeIndex] && <div key={part.bodyPart}>{part.bodyPart}</div>) }
    const showParts = (activeIndex) => {
        return parts.map(
            (part) => part.active[activeIndex] && (
                <div key={part.bodyPart} className="row">
                    {/* body part */}
                    <div className="col-3">{part.bodyPart}</div>

                    {/* original full price */}
                    <div className="col-2 text-decoration-line-through">${addToTotal(part.price)}</div>

                    {/* discounted price */}
                    <div className="col-2">
                        ${(showDiscounted(part.price))}
                    </div>

                    {/* choose discount */}
                    <div className="col-auto">
                        <select className="form-select-sm" aria-label="Default select example" /* value={discount} */ onChange={(e) => handleDiscountChange(part, e)}>
                            <option defaultValue>{discount}</option>
                            <option value="30">30%</option>
                            <option value="40">40%</option>
                            <option value="50">50%</option>
                            <option value="60">60%</option>
                        </select>
                    </div>

                    <div className="col-1 text-end"><button type="button" className="btn-close" aria-label="Close"></button></div>
                </div>)

        )
    }

    return (
        <div className="">
            <div className="row rows-cols-3">
                {/* to keep this part cleaner, having a separate state that filters out is ideal */}
                <div className="col-4">
                    {showParts(0)}
                </div>
                <div className="col-4">
                    {showParts(1)}
                </div>
                <div className="col-4">
                    {showParts(2)}
                </div>
                {/* TOTAL */}
                <div className="col-4">discounted total for 36 months: {total[0]}</div>
                <div className="col-4">total, per month, cost, savings</div>
                <div className="col-4">total, per month, cost, savings</div>
            </div>
        </div>
    );
}

export default QuoteCalcBot;

Answer 1

Can try to update the state from the event handler(source of the event)

//passing extra params to event handler
const handleDiscountChange = (part, e, partPrice) => {
      // this may need extra props to update the price for the right part
      const newDiscount = e.target.value 
      // put this in a common function
      const calcPartPrice = Math.ceil((partPrice * ((100 - newDiscount) / 100)) / 36)
     const newState = discountedTotal.map((t, i) => i === option? t + calcPartPrice : t)
    setTotal(newState);
    // update discount
    console.log(e.target.value);
    console.log(part);
}   

better to move this outside as a seperate component

 const ShowParts = ({ parts = [], activeIndex, discount, handleDiscountChange, addToTotal }) => {

    return parts.map(
        (part) => {

          const partPrice = Math.ceil((part.price * ((100 - discount) / 100)) / 36)

          return part.active[activeIndex] && (
            <div key={part.bodyPart} className="row">
                {/* body part */}
                <div className="col-3">{part.bodyPart}</div>

                {/* original full price */}
                <div className="col-2 text-decoration-line-through">${addToTotal(part.price)}</div>

                {/* discounted price */}
                <div className="col-2">
                   <div className="col-2">
                        {partPrice}
                   </div>
                </div>

                {/* choose discount */}
                <div className="col-auto">
                    <select className="form-select-sm" aria-label="Default select example" /* value={discount} */ 
                     // pass partPrice and other props needed to handler to help in total calculations
                     onChange={(e) => handleDiscountChange(part, e, part.price)} 
                      >
                        <option defaultValue>{discount}</option>
                        <option value="30">30%</option>
                        <option value="40">40%</option>
                        <option value="50">50%</option>
                        <option value="60">60%</option>
                    </select>
                </div>

                <div className="col-1 text-end"><button type="button" className="btn-close" aria-label="Close"></button></div>
            </div>)
  }) 
}

usage inside main app

   <div className="col-4">
        <ShowParts 
           parts={parts} 
           activeIndex={0} 
           discount={discount} 
           handleDiscountChange={handleDiscountChange} 
           addToTotal={addToTotal} 
        />
   </div>

The code can be optimized further, but I hope this helps you in some way