React+TypeScript中用useState结合Interface实现输入框复用及报错解决

错误原因 #

TypeScript的interface只是静态类型定义，仅用于代码编译阶段的类型校验，不是可实例化的JavaScript对象或类。你写的new newInputsInterface()属于把类型当成可调用的值来用，自然会报错。

修正步骤及完整代码 #

下面是修复后的代码，同时优化了类型严谨性和逻辑合理性：

import { useState } from 'react';

// 接口名遵循TypeScript大驼峰命名规范
interface InputItem {
  companyName?: string;
  cargo?: string;
  inicio?: string;
  termino?: string;
}

// 示例输入框配置数组（根据你的业务实际调整）
const InputsMap = [
  { placeholder1: '公司名称', title1: 'companyName', placeholder2: '职位', title2: 'cargo' },
  { placeholder1: '开始时间', title1: 'inicio', placeholder2: '结束时间', title2: 'termino' },
];

export default function InputDuplicateDemo() {
  // 初始化state：用符合InputItem类型的空对象，而非尝试实例化接口
  const [newInputs, setNewInputs] = useState<InputItem[]>([{}]);

  // 优化onChangeInput的类型，避免any，提升类型安全性
  const onChangeInput = (
    propName: keyof InputItem, // 限制属性名只能是InputItem的合法字段
    e: React.ChangeEvent<HTMLInputElement>,
    index: number
  ) => {
    // 使用函数式更新state，确保拿到最新的state值
    setNewInputs(prevState => {
      const updatedArr = [...prevState];
      // 确保当前索引的项存在，不存在则创建空对象
      updatedArr[index] = updatedArr[index] || {};
      updatedArr[index][propName] = e.target.value;
      return updatedArr;
    });
  };

  const addNewInputGroup = () => {
    // 新增输入组时，push一个符合InputItem类型的空对象
    setNewInputs(prevState => [...prevState, {}]);
  };

  return (
    <div>
      {/* 遍历newInputs数组渲染输入组，确保新增后能正确显示 */}
      {newInputs.map((item, index) => (
        <div key={index} style={{ margin: '12px 0', padding: '12px', border: '1px solid #e5e7eb' }}>
          {InputsMap.map((card) => (
            <div key={card.title1} style={{ marginBottom: '8px' }}>
              <input
                placeholder={card.placeholder1}
                value={item[card.title1 as keyof InputItem] || ''}
                onChange={(e) => onChangeInput(card.title1 as keyof InputItem, e, index)}
                style={{ marginRight: '12px', padding: '4px 8px' }}
              />
              <input
                placeholder={card.placeholder2}
                value={item[card.title2 as keyof InputItem] || ''}
                onChange={(e) => onChangeInput(card.title2 as keyof InputItem, e, index)}
                style={{ padding: '4px 8px' }}
              />
            </div>
          ))}
          <button onClick={addNewInputGroup} style={{ padding: '4px 12px' }}>
            +
          </button>
        </div>
      ))}
    </div>
  );
}

关键修正点 #

• 移除所有new newInputsInterface写法，改用{}创建符合接口类型的对象
• 优化onChangeInput的参数类型：用keyof InputItem限制属性名范围，用React.ChangeEvent<HTMLInputElement>定义事件类型，避免any
• 改用函数式更新state，确保操作的是最新状态
• 调整渲染逻辑：遍历newInputs数组生成输入组，保证点击+按钮后新增的输入组能正确渲染
• 给输入框的value设置默认空字符串，避免undefined导致的输入框异常

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