React如何处理多个可复用输入框，精准修改对应对象属性

正确的 onChange 实现 #

你原来的写法有两个核心问题：直接修改原state对象（React无法识别这种变更），以及错误地把修改后的对象追加到数组末尾而非替换原对象。以下是修正后的代码：

<StepDescription
  id={id}
  placeholder="Description"
  value={description ?? ""}
  onChange={(e) => {
    // 基于原state生成新数组，遵循不可变更新原则
    setSteps(prevSteps => 
      prevSteps.map(step => 
        step.id === id 
          ? {...step, description: e.target.value} // 匹配到目标id时，返回新对象修改对应属性
          : step // 其他对象保持原样
      )
    );
  }}
/>

优化建议：添加类型定义（避免any） #

为了代码更健壮，建议明确类型替代any：

// 定义Step类型
type Step = {
  id: number;
  title: string;
  description: string;
};

// 初始化state时指定类型
const [steps, setSteps] = useState<Step[]>([
  {
    id: 1,
    title: "Step 1",
    description: "Test1",
  },
]);

// 子组件Props也指定类型
type Props = {
  id: number;
  title: string;
  description: string;
  steps: Step[];
  setSteps: React.Dispatch<React.SetStateAction<Step[]>>;
};

原代码错误解析 #

1. 直接修改原state对象：stepToChange.description = e.target.value 属于直接修改state中的原对象（mutate），React依赖不可变值触发重新渲染，这种修改不会被检测到，组件不会更新。
2. 错误的数组更新逻辑：[...steps, stepToChange] 是把修改后的对象追加到数组末尾，导致数组出现重复id的对象，而非替换原有对象。

同类问题通用处理思路 #

如果需要同时处理title和description的输入更新，可以提取通用更新函数，避免重复代码：

// 父组件定义通用更新函数
const updateStepField = (stepId: number, field: keyof Step, value: string) => {
  setSteps(prev => 
    prev.map(step => 
      step.id === stepId ? {...step, [field]: value} : step
    )
  );
};

// 传递给子组件
<RecipeDetailsStep 
  id={1} 
  title="Step 1" 
  description="Test1" 
  updateStepField={updateStepField} 
/>

// 子组件中调用（Description输入）
<StepDescription
  id={id}
  placeholder="Description"
  value={description ?? ""}
  onChange={(e) => updateStepField(id, 'description', e.target.value)}
/>

{/* Title输入同理 */}
<StepTitle
  id={id}
  placeholder="Title"
  value={title}
  onChange={(e) => updateStepField(id, 'title', e.target.value)}
/>

这种方式解耦了子组件与父组件的state结构，统一处理不同字段的更新，代码更易维护。

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