Input field is always one value behind what Ive typed-CodePudding

I am trying to build a date input for the first time. I have the task of making sure the input displays a leading 0 if the month or day are set to a single digit. The issue Im having is when a value is entered it doesnt make it to the next handler until the next time i type into a field. I believe this is because Im passing the value through the state. But im not sure how to have the state readily available to send right after the user types in the field:

State:

  const [date, setDate] = useState({ day: "", month: "", year: "" });

My date input consist of three separate inputs for mon/day/year ill only show month here:

<div className="nh-date">
          <Input
            onChange={dateChange("month")}
            value={date.month}
            className={`nh-mon ${!!error && "error"}`}
            name="month"
            id="mon"
            maxLength={2}
            type="number"
            selectTextOnFocus={true}
          />
          <span className="sep">/</span>

My onChange handler looks like this:

 const dateChange = (field: string) => (e: any) => {
    // format to fit
    let value = e.target.value;
    let d = { day: "", month: "", year: "" };
    if (value.length < 2) {
      value = "0"   value;
    } else {
        //remove extra leading 0's
      value = value - 0;
    }

    setDate({ ...date, [field]: value });

    const newDate = `${date.month}/${date.day}/${date.year}`;
   
    if (moment(newDate).isValid()) {
      debounceCallback(handleDateChange, newDate);
      setError(false);
    } else {
      setError(true);
    }
  };

Once I type into the field debounceCallback(handleDateChange, newDate); receives the newDate but not as it is currently shown it sends the initial or previous value. I still struggle with handling input in the state im not sure how to work around this any advice would be helpful. Thank you!

CodePudding user response：

in useEffect your date is updated and you call callback with new date

const dateChange = (field: string) => (e: any) => {
    // format to fit
    let value = e.target.value;
    let d = { day: "", month: "", year: "" };
    if (value.length < 2) {
      value = "0"   value;
    } else {
        //remove extra leading 0's
      value = value - 0;
    }

    setDate((prevState) => {
        return { ...prevState, [field]: value };
    });
}

useEffect(() => {
  const newDate = `${date.month}/${date.day}/${date.year}`;
  if (moment(newDate).isValid()) {
    debounceCallback(handleDateChange, newDate);
    setError(false);
  } else {
    setError(true);
  }
}, [date, //rest dependencies]);

CodePudding user response：

Calling setState() in React is asynchronous, for various reasons (mainly performance). Under the covers React will batch multiple calls to setState() into a single state mutation, and then re-render the component a single time, rather than re-rendering for every state change.

I think you get previous value for Month 
setDate({ ...date, [field]: value }); not immediately update the state.

const dateChange = (field: string) => (e: any) => {
    // format to fit
    let value = e.target.value;
    let d = { day: "", month: "", year: "" };
    if (value.length < 2) {
      value = "0"   value;
    } else {
        //remove extra leading 0's
      value = value - 0;
    }

    setDate({ ...date, [field]: value });

    const newDate = `${value}/${date.day}/${date.year}`;
   
    if (moment(newDate).isValid()) {
      debounceCallback(handleDateChange, newDate);
      setError(false);
    } else {
      setError(true);
    }
  };