使用 useEffect 发出渲染内容

Question

My issue appears in my app with a simple calculator that I want to calculate the delivery fee. The issues is that somehow only the previous number is saved/memorized. for example I type: 1 (now surcharge is 9) then I type 2 ( surcharge is now 0 and should be 0) but when I click the button and the surcharge should get added to whatever number( i added 2 in the OverallResult) it uses the previous surcharge value which is 9 so my total becomes 11. This problem persists throughout the code, I'm sure I have some other issues as well but this one is my main concern. I want to use useEffect and update data, after the data has been updated I want when clicked to update the total delivery fee and post in the screen. Here I will post just a code for Surcharge.js and my main app.js + helper.js + OverallResult. In case someone wants the whole project let me know!

 import React, { useState, useEffect } from "react"; import { MIN_SUR_VALUE, INITIAL_VALUE, FREE_SHIPPING } from "../helper/helper"; function Surcharge(props) { const [totalSurcharge, changeTotalSurcharge] = useState(INITIAL_VALUE); useEffect(() => { if (props.cartValue <= FREE_SHIPPING) { if (props.cartValue < MIN_SUR_VALUE) { changeTotalSurcharge(MIN_SUR_VALUE - props.cartValue); } else { changeTotalSurcharge(INITIAL_VALUE); } } else { changeTotalSurcharge(INITIAL_VALUE); } return props.changeSurchargeFee(totalSurcharge); console.log("props.cartvalue" + totalSurcharge); }, [props.cartValue]); return ( <div> <h1>total for delivery{totalSurcharge}</h1> <label htmlFor="cartValue">Cart value:</label> <input value={props.cartValue} type="number" id="cartValue" className="cartValue" onChange={(e) => props.changeCartValue(e.target.value)} ></input> </div> ); } export default Surcharge; // props.cartValue <= FREE_SHIPPING //? props.cartValue < MIN_SUR_VALUE //? changeTotalSurcharge(MIN_SUR_VALUE - props.cartValue) //: changeTotalSurcharge(INITIAL_VALUE) //: changeTotalSurcharge(INITIAL_VALUE);

 import React, { useState } from "react"; import "./App.css"; import Surcharge from "./components/Surcharge"; import Distance from "./components/Distance"; import NumberOfItems from "./components/NumberOfItems"; import OverallResult from "./components/OverallResult"; import { DATE_RN, RND1 } from "./helper/helper"; function initialValue() { return 0; } function App() { const [cartValue, changeCartValue] = useState(() => initialValue()); const [deliveryDistance, changeDeliveryDistance] = useState(() => initialValue() ); const [amountOfItemsValue, changeamountOfItems] = useState(() => initialValue() ); const [surchargeFee, changeSurchargeFee] = useState(0); const [distanceFee, changeDistanceFee] = useState(0); const [containerFee, changeContainerFee] = useState(0); const [click, changeClick] = useState(true); const [clickedState, changeClickedState] = useState(true); const changeClickidy = (e) => { e.preventDefault(); changeClick(false); }; const handleSubmit = (e) => { e.preventDefault(); changeCartValue(() => initialValue()); changeDeliveryDistance(() => initialValue()); changeamountOfItems(() => initialValue()); }; return ( <div> <div> <h1>{DATE_RN}</h1> <h1>Delivery Fee Calculator</h1> <form onSubmit={handleSubmit} className="form"> <Surcharge cartValue={cartValue} changeCartValue={changeCartValue} changeSurchargeFee={changeSurchargeFee} /> <br></br> <Distance deliveryDistance={deliveryDistance} changeDeliveryDistance={changeDeliveryDistance} changeDistanceFee={changeDistanceFee} /> <br></br> <NumberOfItems amountOfItemsValue={amountOfItemsValue} changeamountOfItems={changeamountOfItems} changeContainerFee={changeContainerFee} /> <br></br> <label htmlFor="date">When to deliver </label> <br></br> <input type="date" id="date" className="date" min={DATE_RN} max="2022-12-31" ></input> <br></br> <input type="submit" value="Calculate delivery price" onClick={changeClickidy} ></input> <OverallResult surchargeFee={surchargeFee} distanceFee={distanceFee} containerFee={containerFee} click={click} /> </form> </div> </div> ); } export default App;

 export const MIN_SUR_VALUE = 10; export const INITIAL_VALUE = 0; export const MAX_DISTANCE = 10000; export const BASE_FEE = 2; export const FREE_SHIPPING = 100; export const NORMAL_ITEMS = 4; export const MAX_FEE = 15; export const DD = String(new Date().getDate()).padStart(2, "0"); export const MM = String(new Date().getMonth() + 1).padStart(2, "0"); //January is 0. export const YYYY = new Date();getFullYear(); export const DATE_RN = `${YYYY}-${MM}-${DD}`, const week = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"; ]. export const STRING_DAY = week[new Date();getDay()]. export const TIME_RN = new Date();getHours(); export let RND1 = true;

 import React, { useEffect, useState } from "react"; import { INITIAL_VALUE, STRING_DAY, TIME_RN, MAX_FEE } from "../helper/helper"; function OverallResult(props) { const [total, changeTotal] = useState(() => INITIAL_VALUE); useEffect(() => { changeTotal(2 + props.surchargeFee); return total; }, [props.click]); console.log(total); return ( <div> <h1> Day is {STRING_DAY} time is: {TIME_RN} </h1> <h1>Delivery price: {total}</h1> </div> ); } export default OverallResult;

Answer 1

It seems there's no way to solve this without using useReducer and useContext.