Fix render-phase dispatch in FieldArrayForm
This commit is contained in:
@@ -5,7 +5,7 @@ import _ from "lodash";
|
|||||||
import useTranslation from "next-translate/useTranslation";
|
import useTranslation from "next-translate/useTranslation";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import React, { useMemo, useState } from "react";
|
import React, { useEffect, useMemo, useState } from "react";
|
||||||
import "react-datepicker/dist/react-datepicker.css";
|
import "react-datepicker/dist/react-datepicker.css";
|
||||||
import Dropzone from "react-dropzone";
|
import Dropzone from "react-dropzone";
|
||||||
import { Field, FieldArray, change } from "redux-form";
|
import { Field, FieldArray, change } from "redux-form";
|
||||||
@@ -1602,7 +1602,11 @@ export const FieldArrayForm = (props) => {
|
|||||||
(showIfHasParentShowValue == parentField) != false &&
|
(showIfHasParentShowValue == parentField) != false &&
|
||||||
showIfHasParentShowValue;
|
showIfHasParentShowValue;
|
||||||
|
|
||||||
!showIfHasParentShowValue && dispatch(change("appealForm", name, null));
|
useEffect(() => {
|
||||||
|
if (!showIfHasParentShowValue) {
|
||||||
|
dispatch(change("appealForm", name, null));
|
||||||
|
}
|
||||||
|
}, [dispatch, name, showIfHasParentShowValue]);
|
||||||
|
|
||||||
parentFieldShowOnValue;
|
parentFieldShowOnValue;
|
||||||
const { handleSubmit, pristine, reset, submitting } = props;
|
const { handleSubmit, pristine, reset, submitting } = props;
|
||||||
|
|||||||
@@ -3473,3 +3473,29 @@ Validation:
|
|||||||
Follow-ups:
|
Follow-ups:
|
||||||
|
|
||||||
- Keep redux-form `fields.push/remove` calls event/effect-driven (not render-driven) in future slices.
|
- Keep redux-form `fields.push/remove` calls event/effect-driven (not render-driven) in future slices.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### CL-097: 22500 `FieldArrayForm` render-phase dispatch warning hotfix
|
||||||
|
|
||||||
|
date: 2026-04-07
|
||||||
|
author: Cline
|
||||||
|
scope: `components/elements/index.js`
|
||||||
|
type: change
|
||||||
|
rationale: Fix React warning caused by dispatching redux-form state updates during `FieldArrayForm` render.
|
||||||
|
impact: No intended behavior change; clearing hidden FieldArray values remains intact but now executes in effect phase instead of render phase.
|
||||||
|
status: completed
|
||||||
|
|
||||||
|
Summary:
|
||||||
|
|
||||||
|
- Root cause: `dispatch(change("appealForm", name, null))` was called inline in render when parent condition was false.
|
||||||
|
- Fix: moved that dispatch into `useEffect` guarded by `!showIfHasParentShowValue`.
|
||||||
|
- Added `useEffect` import in `components/elements/index.js`.
|
||||||
|
|
||||||
|
Validation:
|
||||||
|
|
||||||
|
- `npx eslint components/elements/index.js` -> pass
|
||||||
|
|
||||||
|
Follow-ups:
|
||||||
|
|
||||||
|
- Continue avoiding dispatch/state mutations inside render for field visibility toggles.
|
||||||
|
|||||||
Reference in New Issue
Block a user