React中使用useState管理对象数组时UI无法同步更新问题

你的代码有6个关键逻辑错误，直接导致状态更新不同步、UI不刷新甚至报错：

• handleFieldInput的map逻辑缺失返回值：只有id匹配的行返回了更新后的对象，其余不匹配的行没有写return，默认返回undefined，更新后的数组除了当前编辑行全是空值，直接破坏数组结构导致渲染异常。
• 取行id的方式耦合DOM结构：靠e.target.parentElement.parentElement.id爬DOM层级找tr的id，只要DOM结构稍作调整（比如td里套一层容器、事件target冒泡到子元素）就会取错id，更新根本匹配不到对应行。
• 状态更新依赖闭包旧值：setRows直接拿外层作用域的formBuilderRows做计算，React状态批量更新时，快速输入会拿到过期的旧状态，导致输入内容被覆盖丢失。
• select受控写法错误：在option标签上加selected属性是原生DOM的写法，React中受控select需要直接给select根标签绑定value属性，否则下拉选择和状态无法同步。
• 事件处理器传参错误：给deleteHandler传值时直接执行了deleteItem(index)，组件渲染阶段就会触发删除逻辑，不是点击按钮时才执行，会导致无限重渲染、行数据异常丢失。
• 列表渲染缺失唯一key：map渲染子组件时没有传key属性，增删改行时React无法正确识别组件对应关系，会出现状态错位、输入框内容跳变的问题。

1. 父组件状态与逻辑修正 #

import { useState } from 'react';
import FormBuilderRow from './FormBuilderRow';

// 初始状态保持不变
const initialState = {
  rows: [{ id: "R-0", name: "name", type: "text" }],
  formName: "formName",
};

export default function FormBuilder() {
  const [formBuilderRows, setRows] = useState(initialState.rows);

  // 修正输入处理逻辑：用函数式更新拿最新状态，直接接收行id、字段名、值，不爬DOM
  const handleFieldInput = (rowId, fieldName, value) => {
    setRows(prevRows => prevRows.map(row => {
      // 不匹配的行必须原样返回，不能漏
      if (row.id !== rowId) return row;
      // 匹配的行更新对应字段
      return { ...row, [fieldName]: value };
    }));
  };

  // 新增行逻辑：生成唯一id，不可变更新数组
  const addNewRow = () => {
    const newRow = {
      id: `R-${Date.now()}`, // 用时间戳生成唯一id，不要用数组长度
      name: "",
      type: "text"
    };
    setRows(prev => [...prev, newRow]);
  };

  // 删除行逻辑
  const deleteItem = (targetIndex) => {
    setRows(prev => prev.filter((_, index) => index !== targetIndex));
  };

  return (
    <div>
      {/* 新增按钮可自行调整位置 */}
      <button type="button" onClick={addNewRow} className="btn btn-primary">新增字段</button>
      <table>
        <tbody id="tbody-FormBuilder">
          {formBuilderRows.map((it, index) => {
            return (
              <FormBuilderRow
                key={it.id} // 必须加唯一key，用行id不要用index
                fieldId={it.id}
                fieldName={it.name}
                fieldType={it.type}
                // 用箭头函数包裹，点击时才执行删除逻辑，不要直接调用
                deleteHandler={() => deleteItem(index)}
                handleChange={handleFieldInput}
              />
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

2. FormBuilderRow子组件修正 #

import { useAppContext } from "../context/appContext";
const FormBuilderRow = ({
  fieldName,
  fieldType,
  deleteHandler,
  handleChange,
  fieldId,
}) => {
  const { formBuilderTypeOptions: list } = useAppContext();
  return (
    <tr id={fieldId}>
      <td>
        <input
          type="text"
          name="name"
          className="form-input"
          value={fieldName}
          // 输入时直接把当前行id、字段名、值传给父组件，不需要父组件爬DOM
          onChange={(e) => handleChange(fieldId, "name", e.target.value)}
          required
        />
      </td>
      <td>
        <select
          className="form-select select-field"
          name="type"
          // 直接给select绑定value，作为标准受控组件，去掉option上的selected
          value={fieldType}
          onChange={(e) => handleChange(fieldId, "type", e.target.value)}
        >
          {list.map((itemValue, index) => {
            return (
              <option key={index} value={itemValue}>
                {itemValue}
              </option>
            );
          })}
        </select>
      </td>
      <td>
        <button
          className="btn btn-danger"
          type="button"
          onClick={deleteHandler}
        >
          <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z"
              fill="currentColor"
            />
          </svg>
        </button>
      </td>
    </tr>
  );
};

export default FormBuilderRow;

• 所有数组状态更新必须遵循不可变数据原则，不要直接修改原数组/原对象，必须返回新的引用。
• 列表渲染必须给子组件传唯一稳定的key，不要用数组索引当key，否则增删行会出现状态错位。
• 不要依赖DOM层级关系拿业务数据，组件本身就持有行id等数据，直接通过参数传递更稳定。
• React受控表单统一在表单元素根标签上绑定value和onChange，不要混用原生DOM的selected、checked等属性。

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