React+TypeScript动态输入框：输入时重复渲染致输入中断求助

你的需求是实现最多5个动态输入框：首次输入第一个后生成第二个，输入第二个后生成第三个，但当前实现中每次输入都会打断输入流，需要重新点击输入框才能继续。问题出在state更新方式错误和逻辑重复导致的组件不必要重渲染/焦点丢失，以下是修复后的实现：

问题根源 #

1. 直接依赖forms和indexPressed的当前值更新state，存在闭包陷阱，无法获取最新状态
2. handleInputChange和replaceDataAtIndex重复执行添加新输入框的逻辑，导致state多次更新，组件频繁重渲染丢失焦点
3. indexPressed的管理逻辑混乱，没有准确标记输入框是否已被首次输入过

修复后的完整代码 #

组件部分 #

import { useState } from 'react';
import TextField from '@mui/material/TextField'; // 假设使用MUI的TextField组件

const ExtraTags = (el) => {
  // 初始化输入框数组，内置首次输入标记
  const [forms, setForms] = useState([{ id: 0, value: "", isFirstInput: false }]);

  const handleInputChange = (id, value) => {
    setForms(prevForms => {
      // 复制并更新当前输入框的值，标记为已触发首次输入
      const updatedForms = prevForms.map(form => 
        form.id === id ? { ...form, value, isFirstInput: true } : form
      );

      // 判断是否需要添加新输入框：最后一个已触发输入的框是当前数组最后一项，且总数未达5个
      const lastTriggeredIndex = updatedForms.findLastIndex(form => form.isFirstInput);
      const canAddNew = lastTriggeredIndex !== -1 
        && lastTriggeredIndex === updatedForms.length - 1 
        && updatedForms.length < 5;

      if (canAddNew) {
        const lastId = updatedForms[updatedForms.length - 1].id;
        return [...updatedForms, { id: lastId + 1, value: "", isFirstInput: false }];
      }

      return updatedForms;
    });
  };

  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", maxHeight: "3rem" }}>
        <div>{el.el}</div>
      </div>
      {forms.map((form) => (
        <div key={form.id}>
          {form.id}
          <TextField
            value={form.value}
            onChange={(e) => handleInputChange(form.id, e.target.value)}
          />
        </div>
      ))}
    </div>
  );
};

export default ExtraTags;

关键改动说明 #

• 函数式更新state：setForms(prevForms => ...)确保每次都能获取最新的state值，避免闭包导致的旧状态引用问题
• 合并逻辑到一处：把输入框值更新和新框添加逻辑放在同一个setForms调用中，减少不必要的state更新次数，避免组件频繁重渲染丢失焦点
• 内置首次输入标记：在每个form对象中添加isFirstInput属性，替代原来的indexPressed数组，逻辑更直观且避免数组管理混乱
• 精准判断添加条件：只有当最后一个输入框完成首次输入，且总数未到5时，才添加新输入框，完全匹配需求逻辑

修改后，输入时不会再出现焦点丢失的问题，输入流可以连续进行，同时准确实现动态生成输入框的需求。

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