如何在 React js 中更新我的订单挂钩？

Question

我正在尝试更新订单挂钩中的值。然而，这些值似乎没有更新。我对 React 相当陌生，不确定我在这里做错了什么。有什么想法吗？

这是我的代码：

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);
    }
}

我尝试过不执行

update()

函数，而只是更新

processOrder()

内的值，但这仍然不起作用。

我还尝试在不使用

(prev) => ({...prev,

的情况下更新值，但这也不起作用。

Answer 1

我遇到的问题是我正在调用

update()

函数，这可以正常工作，但 useStates 可能需要时间来完全处理更改。这意味着在成功更改

axios.post

之前调用

order

。 我找到的解决方案是使用 useEffect 以便在订单或导航更改或单击按钮时自动触发。

这是我的解决方案：

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>
);