React邮件模板生成器拖拽时表单字段状态丢失问题求助

嘿，我之前在做类似的拖拽排序组件时，也踩过这个一模一样的坑！问题根源其实和React的组件渲染机制以及react-sortable-hoc的工作方式有关——当你拖拽重排行的时候，如果组件的key用了数组索引，或者表单状态存在行/列组件内部，拖拽后React会销毁旧的组件实例并创建新的，自然就把之前的表单状态弄丢了。

下面是我亲测有效的几个解决方案：

1. 给每个行分配唯一ID，用ID代替索引做key #

不要用数组的index作为行组件的key，因为排序后索引会变，React会误以为是新组件。取而代之的是，在创建行的时候给每个行生成一个唯一ID（比如用uuid库生成，或者自己写个简单的递增ID），排序时操作的是包含这些ID的数组，渲染时用ID作为key。

示例代码片段：

// 创建新行时生成唯一ID
const addRow = () => {
  setRows(prev => [...prev, { id: `row-${Date.now()}`, columns: [] }]);
};

// 渲染行组件
{rows.map((row, index) => (
  <SortableItem key={row.id} index={index} row={row} />
))}

2. 将表单状态提升到父组件管理 #

不要让列里的输入框、文本框等组件自己维护状态，而是把所有表单状态统一存在父组件的状态中。比如用一个对象，键是${rowId}-${columnId}，值是对应表单的内容。这样不管行怎么排序，状态都保存在父组件里，不会随组件销毁而丢失。

示例：

// 父组件状态
const [formState, setFormState] = useState({});

// 列组件的输入 onChange 回调
const handleInputChange = (rowId, columnId, value) => {
  setFormState(prev => ({
    ...prev,
    [`${rowId}-${columnId}`]: value
  }));
};

// 列组件使用状态
<Input 
  value={formState[`${row.id}-${column.id}`] || ''}
  onChange={(e) => handleInputChange(row.id, column.id, e.target.value)}
/>

3. 正确处理react-sortable-hoc的排序回调 #

在onSortEnd回调里，要正确更新父组件的行数组顺序，确保状态和UI同步。不要直接修改原数组，要创建新数组来触发React的重新渲染：

const onSortEnd = ({ oldIndex, newIndex }) => {
  setRows(prev => {
    const newRows = Array.from(prev);
    const [movedRow] = newRows.splice(oldIndex, 1);
    newRows.splice(newIndex, 0, movedRow);
    return newRows;
  });
};

按照这几步来，拖拽行的时候表单状态就能稳稳保留住了！我当时就是这么解决的，亲测有效~

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