React useState får if-else til at virke forkert

Så jeg prøver at indstille en værdi ved hjælp af en useState krog (React JS) i en if-else betinget erklæring.

Jeg skal tjekke, om der er addOnName (som sendes som en parameter), i addOnContainer array, og hvis det gør det, skal jeg trække addOnPrice fra (som også sendes som en parameter) til totalprice ved hjælp af setTotalPrice (useState krog).

Hvis addOnContainer inkluderer ikke addOnName , jeg er nødt til at tilføje addOnPrice til totalprice .

Koden fungerer fint, da den giver mig korrekte output i kromkonsollen. Men når jeg prøver at bruge useState krog for at indstille den samlede pris, kun hvis-blokken kører og else kører aldrig uanset tilstanden.

Jeg har prøvet at flytte useState ud af if-else , og havde ikke held med det.

Hvad gør jeg forkert her? Bemærk, at denne funktion er indstillet til at blive udført, når der klikkes på et afkrydsningsfelt.

const [totalPrice, setTotalPrice] = useState(200)

function selectAddOn(addOnName, addOnPrice) {
  let temp = totalPrice

  if (!addOnContainer.includes(addOnName)) {
    temp = totalPrice + addOnPrice

    setTotalPrice(temp)
  } else {
    //never reaches even if the condition is false when useState is used.

    temp = totalPrice - addOnPrice

    setTotalPrice(temp)
  }
}

Svar

Ved hver gengivelse let addOnContainer = []; bliver nulstillet til tom matrix.

Du kan bruge en useRef for at undgå det:

const {useState, useRef} = React

function App() {

  const [totalPrice, setTotalPrice] = useState(200);
  const addOnContainer = useRef([]);
  // let addOnContainer = []; // This was the ISSUE

  function addToTotalPrice (addOnName, addOnPrice) {

    let temp = totalPrice;
    if(!addOnContainer.current.includes(addOnName)){
      addOnContainer.current.push(addOnName);
      temp = totalPrice + addOnPrice;
      setTotalPrice(temp)
    } else {
      temp = totalPrice - addOnPrice;
      setTotalPrice(temp);
    }
  }

  return (
    <button onClick={()=>addToTotalPrice('cheese',30)}>Click, totalPrice: {totalPrice}</button>
  );
}

ReactDOM.render(<App />, document.body)
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>