重新渲染时反应自定义挂钩 state 未更新

Question

I'm having an issue when repopulating form for edit using react hooks.

Parent Component: Edit.js

const EditData = (props) => {
    const { Id } = props.match.params;
    const dispatch = useDispatch();
    // calling redux action to get the data
    useEffect(() => {
      dispatch(getDataById(Id));
    }, [Id]);
    const data = useSelector((state) => state.data);
    const initialState = {
      Id: data.cardId || '',
      Number: data.Number || '',
      Date: data.Date,
    };
    //calling custom hook
    const { handleChange, handleSubmit, values,errors } = useForm(
        initialState,// passing initial state to custom hook
        validateOnSubmit,
        submit
    );
    // used to submit the data
    function submit() {
      dispatch(updateCard(values));
    }
    return (<DateForm
            handleSubmit={handleSubmit}
            handleChange={handleChange}
            values={values}
            />);
  };

Custom hook: useform.js

  const useForm = (initialState, validateOnSubmit, callback) => {
    const [values, setValues] = useState(initialState);
    const [errors, setErrors] = useState({});
    const [isSubmitting, setIsSubmitting] = useState(false);

    const handleChange = (event) => {
      const { name, value } = event.target;
      setValues({
        ...values,
        [name]: value
      });
    };
    const handleSubmit = (event) => {
      event.preventDefault();
      setErrors(validateOnSubmit(values));
      setIsSubmitting(true);
    };

    useEffect(() => {
      if (Object.keys(errors).length === 0 && isSubmitting) {
        callback();
      }
    }, [errors]);

    return {
      handleChange,
      handleSubmit,
      values,
      errors
    };
  };

when the API call get finished the react re-render the custom but the local state of the hook is not updating.

const useForm = (initialState, validateOnSubmit, callback) => {
      console.log(initialState);

on second render, here i can receive data from the API

    const [values, setValues] = useState(initialState);

but values is not getting updated, values is still holding the state from the initial render

I cannot figure out why this is. I'm just started to use react hooks, please help me.

Answer 1

As OP stated in a comment:

the initialState variable is updated when the API call get completed,I'm passing that initialState variable to const [values, setValues] = useState(initialState); , so it should update the values variable right?. but it's not!

It is should update the state, the initial state is assigned once until the component unmounts.

See useState API , it stated in lazy initialization :

The initialState argument is the state used during the initial render. In subsequent renders, it is disregarded.