Html Question posted in
Some basic documentation can be found here.

Html – How can I get my order hook to update in react js?

I am trying to update the values in my order hook. However, the values do not seem to be updating. I am fairly new to React and am not sure what I am doing wrong here. Any Ideas?

Here is my code:

const [order, setOrder] = useState({
    specBurger: "",
    protein: "",
    bread: "",
    toppings: "",
    sides: "",
    drinks: "",
    price: 0.00
})
const navigate = useNavigate();
const update = () => {
    setOrder((prev) => ({...prev,
        specBurger: specItemsString,
        protein: proteinItemsString,
        bread: breadItemsString,
        toppings: toppingsItemsString,
        sides: sideItemsString,
        drinks: drinkItemsString,
        price: price.toFixed(2),
    }));
}
const processOrder = async (e) =>{
    e.preventDefault();
    update();

    try{
        await axios.post('http://localhost:8800/ordered', order);
        navigate("/pages/Confirmation");
    }catch(err){
        console.log(err);
    }
}

I have tried not doing an update() function and just updating the values inside the processOrder() but that still didn’t work.

I also tried updating the values without using the (prev) => ({...prev, That did not work either.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The issue I was having was that I was calling the update() function and that would work fine, but useStates may take time to fully process the changes. This meant that axios.post was being called before order was successfully changed. The solution I found was to use a useEffect in order to automatically trigger when order or navigate changed or when I clicked a button.

    Here is my solution:

    const [order, setOrder] = useState({
    specBurger: "",
    protein: "",
    bread: "",
    toppings: "",
    sides: "",
    drinks: "",
    price: 0.00
});
const navigate = useNavigate();
const [buttonClicked, setButtonClicked] = useState(false);

const update = () => {
    setOrder((prev) => ({
        ...prev,
        specBurger: specItemsString,
        protein: proteinItemsString,
        bread: breadItemsString,
        toppings: toppingsItemsString,
        sides: sideItemsString,
        drinks: drinkItemsString,
        price: price.toFixed(2),
    }));
}

const processOrder = async () => {
    try {
        await axios.post('http://localhost:8800/ordered', order);
        navigate("/pages/Confirmation");
    } catch (err) {
        console.log(err);
    }
};

useEffect(() => {
    if (buttonClicked) {
        processOrder();
    }
}, [buttonClicked, order, navigate]);

const handleClick = () => {
    update();
    setButtonClicked(true);
};

return (
    <div>
        <button onClick={handleClick}>Process Order</button>
    </div>
);

  2. 0

    if you update your useEffect like:

    useEffect(() => {
    if (buttonClicked) {
        processOrder();
    }
}, [order, navigate]);

    i.e. removing the buttonClicked from the dependency array. This change will call the process order function only when order is fully updated. Also keep the if condition inside useEffect.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search