React动态列表更新问题：动态表单字段值无法响应式更新求解

核心问题 #

1. useForm初始化错误：你用...props.questions.map(...)将数组展开为对象，导致data是键为索引的对象而非数组，与预期的列表结构不符。
2. 状态更新未创建新引用：直接修改原data数组的引用，状态管理无法检测到变化，组件不会触发更新。
3. 输入逻辑错误：d[index]+=e.target.value会累加输入内容，而非替换为当前输入值，不符合常规输入框行为。

修改后的代码 #

1. 修正useForm初始化

// 直接传入数组，让data保持列表结构
const { data, setData, errors, put, processing } = useForm(
    props.questions.map((q) => q.pivot.answer)
);

2. 修正TextInput的onChange逻辑

{
    question.field_type == 'TEXT_INPUT' && (
        <TextInput 
            value={data[index] || ''} // 处理空值避免显示undefined
            className="w-full"
            onChange={e => {
                // 创建数组副本，避免修改原引用
                const newData = [...data];
                // 替换为当前输入值，而非累加
                newData[index] = e.target.value;
                setData(newData);
            }} />
    )
}

3. 可选：TextInput组件增强（处理空值）

如果原answer可能为undefined，可以在组件内部补全默认值：

export default ({ label, name, className, errors = [], ...props }) => {
    return (
        <div className={className}>
            {label && (
                <label className="flex text-sm font-medium text-gray-700 mb-2" htmlFor={name}>
                    { label }
                </label>
            )}

            <input
                id={name}
                name={name}
                // 确保输入框始终有字符串值
                value={props.value || ''}
                {...props}
            />

            {errors && <div className="text-sm mt-2 text-red-500">{errors}</div>}
        </div>
    );
};

修改说明 #

• 保持data为数组结构，与你存储字段值的列表预期一致。
• 创建数组副本[...data]，让状态管理能检测到引用变化，触发组件重新渲染。
• 用newData[index] = e.target.value实现正常的输入值替换逻辑，符合用户输入习惯。

内容的提问来源于stack exchange，提问作者Jenssen