在 React 表单中，当部分字段因条件逻辑被隐藏时，需自动为当前可见字段生成 1、2、3… 的连续编号，而非按原始索引或 ID 排列；本文提供基于状态过滤与映射的轻量级实现方案。
在 react 表单中，当部分字段因条件逻辑被隐藏时，需自动为**当前可见字段**生成 1、2、3… 的连续编号，而非按原始索引或 id 排列；本文提供基于状态过滤与映射的轻量级实现方案。
实现动态连续编号的核心在于：序号应反映渲染时的逻辑顺序（即可见字段的排列位置），而非数据源中的原始 ID 或数组索引。这意味着即使字段 ID 为 34、45 被隐藏，其后可见字段的显示序号仍需紧凑递增（如第 33 个可见项之后直接是第 34 个，而非保留空缺）。
以下是一个优化后的专业实现方案：
✅ 关键设计原则
- 使用单一 questions 源数据管理字段元信息（ID、标签、可见性等）；
- 通过 filter() 动态计算当前可见字段列表，避免手动维护两套状态（原答案中 visibleQuestions 可由 questions.filter(...) 实时派生，提升可维护性）；
- 序号使用 .map((item, index) => index + 1) 直接基于过滤后数组的索引生成，天然保证连续性；
- 所有状态更新均采用不可变方式（如扩展运算符、map/filter 返回新数组），确保 React 正确触发重渲染。
✅ 推荐代码实现（含注释与健壮性增强）
import { useState, useEffect } from 'react';
function DynamicNumberedForm() {
const [questions, setQuestions] = useState([]);
// 初始化 100 个字段（生产环境建议从 props 或 API 加载）
useEffect(() => {
const initial = Array.from({ length: 100 }, (_, i) => ({
id: i + 1,
label: 'question/field ',
isVisible: true, // 显式布尔值，语义清晰
// 可扩展其他属性：type, required, conditionRules 等
}));
setQuestions(initial);
}, []);
// 切换字段可见性（推荐封装为纯函数，便于测试）
const toggleVisibility = (id) => {
setQuestions(prev =>
prev.map(q =>
q.id === id ? { ...q, isVisible: !q.isVisible } : q
)
);
};
// ✅ 获取当前可见字段（实时计算，无需单独 state）
const visibleQuestions = questions.filter(q => q.isVisible);
return (
<div className="dynamic-form">
{visibleQuestions.map((q, idx) => (
<div key={q.id} className="form-field">
<span className="field-number">{idx + 1}.</span>
<span className="field-label">
{q.label} {q.id}
</span>
<button
type="button"
onClick={() => toggleVisibility(q.id)}
aria-label={`Toggle visibility of ${q.label} ${q.id}`}
>
{q.isVisible ? 'Hide' : 'Show'}
</button>
</div>
))}
<div className="summary">
<small>Visible fields: {visibleQuestions.length} / {questions.length}</small>
</div>
</div>
);
}
export default DynamicNumberedForm;⚠️ 注意事项与最佳实践
- 避免直接操作数组元素属性（如 questions[index].visibility = false）：这会破坏不可变性，导致 React 无法检测变化，引发渲染异常；
- key 应基于稳定标识：示例中使用 q.id（唯一且不变）而非 idx 或拼接字符串，防止列表重排时 DOM 复用错误；
- 条件可见性建议解耦：实际项目中，isVisible 通常由业务规则动态计算（如 dependsOn: 'userRole'），可将可见性逻辑提取为 selector 函数，而非硬编码布尔值；
- 性能考量：对于超大表单（如 >1000 字段），可结合 React.memo 包裹字段组件，并对 visibleQuestions 添加 useMemo 缓存（但 100 字段无需过度优化）。
该方案简洁、可扩展、符合 React 最佳实践，能精准满足“隐藏即跳过、显示即编号”的动态序号需求。
