fix(09-01): fix hydration mismatch in TextFillForm — use useEffect for initialData seed
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
'use client';
|
'use client';
|
||||||
import { useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
interface TextRow { label: string; value: string; }
|
interface TextRow { label: string; value: string; }
|
||||||
|
|
||||||
@@ -17,7 +17,14 @@ function buildInitialRows(initialData?: Record<string, string>): TextRow[] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function TextFillForm({ onChange, initialData }: TextFillFormProps) {
|
export function TextFillForm({ onChange, initialData }: TextFillFormProps) {
|
||||||
const [rows, setRows] = useState<TextRow[]>(() => buildInitialRows(initialData));
|
const [rows, setRows] = useState<TextRow[]>([{ label: '', value: '' }]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (initialData && Object.keys(initialData).length > 0) {
|
||||||
|
setRows(buildInitialRows(initialData));
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, []);
|
||||||
|
|
||||||
function updateRow(index: number, field: 'label' | 'value', val: string) {
|
function updateRow(index: number, field: 'label' | 'value', val: string) {
|
||||||
const next = rows.map((r, i) => i === index ? { ...r, [field]: val } : r);
|
const next = rows.map((r, i) => i === index ? { ...r, [field]: val } : r);
|
||||||
|
|||||||
Reference in New Issue
Block a user