Enhance ObjectForm component with custom merge logic for array handling

- Introduced a custom mergeWith function to handle array replacements during state updates.
- Updated initial form data setting to include computed values while maintaining editing state.
- Refactored update event handler to utilize the new merge logic for improved data management.
This commit is contained in:
Tom Butcher 2025-12-28 01:08:54 +00:00
parent 4bd9acdc11
commit aa6fe3c839

View File

@ -14,10 +14,17 @@ import { useMessageContext } from '../context/MessageContext'
import PropTypes from 'prop-types'
import DeleteObjectModal from './DeleteObjectModal'
import merge from 'lodash/merge'
import mergeWith from 'lodash/mergeWith'
import set from 'lodash/set'
import { getModelByName } from '../../../database/ObjectModels'
import { useNavigate } from 'react-router-dom'
const arrayReplaceCustomizer = (objValue, srcValue) => {
if (Array.isArray(srcValue)) {
return srcValue
}
}
const buildObjectFromEntries = (entries = []) => {
return entries.reduce((acc, entry) => {
const { namePath, value } = entry || {}
@ -285,14 +292,14 @@ const ObjectForm = forwardRef(
const lockEvent = await fetchObjectLock(id, type)
setLock(lockEvent)
onStateChangeRef.current({ lock: lockEvent })
setObjectData({ ...data, _isEditing: isEditingRef.current })
serverObjectData.current = data
// Calculate and set computed values on initial load
const computedEntries = calculateComputedValues(data, model)
const computedValuesObject = buildObjectFromEntries(computedEntries)
const initialFormData = merge({}, data, computedValuesObject)
setObjectData({ ...initialFormData, _isEditing: isEditingRef.current })
form.setFieldsValue(initialFormData)
setFetchLoading(false)
onStateChangeRef.current({ loading: false })
@ -318,7 +325,9 @@ const ObjectForm = forwardRef(
// Update event handler
const updateObjectEventHandler = useCallback((value) => {
setObjectData((prev) => merge({}, prev, value))
setObjectData((prev) =>
mergeWith({}, prev, value, arrayReplaceCustomizer)
)
}, [])
// Update event handler
@ -540,15 +549,22 @@ const ObjectForm = forwardRef(
}
const computedValuesObject = buildObjectFromEntries(computedEntries)
const mergedFormValues = merge(
const mergedFormValues = mergeWith(
{},
allFormValues,
computedValuesObject
arrayReplaceCustomizer
)
merge(mergedFormValues, computedValuesObject)
mergedFormValues._isEditing = isEditingRef.current
setObjectData((prev) => {
return merge({}, prev, mergedFormValues)
return mergeWith(
{},
prev,
mergedFormValues,
arrayReplaceCustomizer
)
})
}}
>