From 36caa1db09fbf24259aed0686fd530bc44f1ef9b Mon Sep 17 00:00:00 2001 From: Strahinja Ajvaz Date: Wed, 5 May 2021 11:23:05 +1000 Subject: [PATCH] added check for undefined or null (#224) * added check for undefined or null * Add comment Co-authored-by: Strahinja Ajvaz Co-authored-by: Misha Moroshko --- src/components/Form.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/Form.js b/src/components/Form.js index 98e0e526..d885b405 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -145,7 +145,19 @@ function Form(_props) { }; const getFieldErrors = useCallback((values, name) => { const value = getPath(values, name); - const field = fields.current[name].current; + /* + Note: + `getFieldErrors` is called by `useEffect` below when `namesToValidate` change, + and we set `namesToValidate` inside `setTimeout` in `onBlur`. This means that + `getFieldErrors` will be called with a little delay. + This opens the door for `unregisterField` being called BEFORE `getFieldErrors` is called. + Think about an input field being focused and then the user clicks on a Next button which + unmounts the current form and mounts the next form page. + In this case, `getFieldErrors` will be called with a `name` that doesn't exist in `fields.current` + anymore since `unregisterField` deleted it. + That's why we need to take case of this scenario :) + */ + const field = fields.current[name]?.current; if ( !field || // See: https://stackoverflow.com/q/65659161/247243