Fix render-phase update in RenderSubFields
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import React from "react";
|
import React, { useEffect } from "react";
|
||||||
import { Field } from "redux-form";
|
import { Field } from "redux-form";
|
||||||
import useTranslation from "next-translate/useTranslation";
|
import useTranslation from "next-translate/useTranslation";
|
||||||
import { RenderTextfield } from "./renderTextfield";
|
import { RenderTextfield } from "./renderTextfield";
|
||||||
@@ -45,7 +45,11 @@ export const RenderSubFields = ({
|
|||||||
return errors;
|
return errors;
|
||||||
};
|
};
|
||||||
|
|
||||||
fields.length == 0 && fields.push({});
|
useEffect(() => {
|
||||||
|
if (fields.length === 0) {
|
||||||
|
fields.push({});
|
||||||
|
}
|
||||||
|
}, [fields, fields.length]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ul className="subFieldList">
|
<ul className="subFieldList">
|
||||||
|
|||||||
@@ -3447,3 +3447,29 @@ Validation:
|
|||||||
Follow-ups:
|
Follow-ups:
|
||||||
|
|
||||||
- Continue bounded Phase 2 slices; when touching field components, prefer top-level computed hook-backed values reused across conditional branches.
|
- Continue bounded Phase 2 slices; when touching field components, prefer top-level computed hook-backed values reused across conditional branches.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### CL-096: 22500 `RenderSubFields` render-phase update warning hotfix
|
||||||
|
|
||||||
|
date: 2026-04-07
|
||||||
|
author: Cline
|
||||||
|
scope: `components/elements/fields/renderSubFields.js`
|
||||||
|
type: change
|
||||||
|
rationale: Fix React warning about updating parent-connected state during `RenderSubFields` render.
|
||||||
|
impact: No intended behavior change; initial empty FieldArray row initialization moved out of render phase to effect phase to satisfy React rendering constraints.
|
||||||
|
status: completed
|
||||||
|
|
||||||
|
Summary:
|
||||||
|
|
||||||
|
- Root cause: `fields.length == 0 && fields.push({})` executed inside render, triggering state updates while rendering `RenderSubFields`.
|
||||||
|
- Fix: moved initial row insertion into `useEffect`, guarded by `fields.length === 0`.
|
||||||
|
- Preserved existing UX intent: ensure at least one subfield row appears when array starts empty.
|
||||||
|
|
||||||
|
Validation:
|
||||||
|
|
||||||
|
- `npx eslint components/elements/fields/renderSubFields.js` -> pass
|
||||||
|
|
||||||
|
Follow-ups:
|
||||||
|
|
||||||
|
- Keep redux-form `fields.push/remove` calls event/effect-driven (not render-driven) in future slices.
|
||||||
|
|||||||
Reference in New Issue
Block a user