Wrap onChange functions passed to lookups in useCallback since these functions are eventually passed to a hook and used in a dependency array.

This commit is contained in:
mabashian
2020-09-24 17:07:58 -04:00
parent ce65ed0ac6
commit 24a4236232
2 changed files with 22 additions and 10 deletions

View File

@@ -1,6 +1,6 @@
import React from 'react'; import React, { useCallback } from 'react';
import { func, shape } from 'prop-types'; import { func, shape } from 'prop-types';
import { Formik, useField } from 'formik'; import { Formik, useField, useFormikContext } from 'formik';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Form, FormGroup } from '@patternfly/react-core'; import { Form, FormGroup } from '@patternfly/react-core';
@@ -22,11 +22,19 @@ import CredentialLookup from '../../../components/Lookup/CredentialLookup';
import { VariablesField } from '../../../components/CodeMirrorInput'; import { VariablesField } from '../../../components/CodeMirrorInput';
function ContainerGroupFormFields({ i18n }) { function ContainerGroupFormFields({ i18n }) {
const { setFieldValue } = useFormikContext();
const [credentialField, credentialMeta, credentialHelpers] = useField( const [credentialField, credentialMeta, credentialHelpers] = useField(
'credential' 'credential'
); );
const [overrideField] = useField('override'); const [overrideField] = useField('override');
const onCredentialChange = useCallback(
value => {
setFieldValue('credential', value);
},
[setFieldValue]
);
return ( return (
<> <>
<FormField <FormField
@@ -43,9 +51,7 @@ function ContainerGroupFormFields({ i18n }) {
helperTextInvalid={credentialMeta.error} helperTextInvalid={credentialMeta.error}
isValid={!credentialMeta.touched || !credentialMeta.error} isValid={!credentialMeta.touched || !credentialMeta.error}
onBlur={() => credentialHelpers.setTouched()} onBlur={() => credentialHelpers.setTouched()}
onChange={value => { onChange={onCredentialChange}
credentialHelpers.setValue(value);
}}
value={credentialField.value} value={credentialField.value}
required required
tooltip={i18n._( tooltip={i18n._(

View File

@@ -1,6 +1,6 @@
import React from 'react'; import React, { useCallback } from 'react';
import { shape, func } from 'prop-types'; import { shape, func } from 'prop-types';
import { Formik, useField } from 'formik'; import { Formik, useField, useFormikContext } from 'formik';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Form, FormGroup } from '@patternfly/react-core'; import { Form, FormGroup } from '@patternfly/react-core';
@@ -17,12 +17,20 @@ import hasCustomMessages from './hasCustomMessages';
import typeFieldNames, { initialConfigValues } from './typeFieldNames'; import typeFieldNames, { initialConfigValues } from './typeFieldNames';
function NotificationTemplateFormFields({ i18n, defaultMessages }) { function NotificationTemplateFormFields({ i18n, defaultMessages }) {
const { setFieldValue } = useFormikContext();
const [orgField, orgMeta, orgHelpers] = useField('organization'); const [orgField, orgMeta, orgHelpers] = useField('organization');
const [typeField, typeMeta] = useField({ const [typeField, typeMeta] = useField({
name: 'notification_type', name: 'notification_type',
validate: required(i18n._(t`Select a value for this field`), i18n), validate: required(i18n._(t`Select a value for this field`), i18n),
}); });
const onOrganizationChange = useCallback(
value => {
setFieldValue('organization', value);
},
[setFieldValue]
);
return ( return (
<> <>
<FormField <FormField
@@ -43,9 +51,7 @@ function NotificationTemplateFormFields({ i18n, defaultMessages }) {
helperTextInvalid={orgMeta.error} helperTextInvalid={orgMeta.error}
isValid={!orgMeta.touched || !orgMeta.error} isValid={!orgMeta.touched || !orgMeta.error}
onBlur={() => orgHelpers.setTouched()} onBlur={() => orgHelpers.setTouched()}
onChange={value => { onChange={onOrganizationChange}
orgHelpers.setValue(value);
}}
value={orgField.value} value={orgField.value}
touched={orgMeta.touched} touched={orgMeta.touched}
error={orgMeta.error} error={orgMeta.error}