React+TypeScript邮件芯片粘贴覆盖与类型错误修复咨询

问题梳理 #

• 首次粘贴多个邮箱可正常生成Chip组件，但再次粘贴其他邮箱时会覆盖原有内容
• 使用函数式更新setItem((i: string[]) => [...i, ...toBeAdded])时触发TypeScript类型错误：Argument of type '(i: string[]) => any[]' is not assignable to parameter of type 'string[]'

核心修复步骤 #

1. 修正Props类型定义 #

当前Props中setItem的类型仅支持直接传入string[]，但React useState的setter原生支持直接传值和函数式更新两种形式。同时需要把模糊的any类型明确为string[]，提升类型安全性：

import { Dispatch, SetStateAction } from 'react';

type Props = {
  LabelName?: string;
  optional?: string;
  tooltip?: string;
  placeholder?: string;
  className?: string;
  upload?: boolean;
  items?: string[]; // 替换any为明确的string[]类型
  setItem: Dispatch<SetStateAction<string[]>>; // 支持函数式更新的类型定义
};

2. 修复粘贴覆盖问题与类型错误 #

修改handlePaste中的setItem调用，利用函数式更新基于最新状态添加新邮箱，TS会自动推断类型，无需手动标注：

const handlePaste = (evt: React.ClipboardEvent<HTMLInputElement>) => {
  evt.preventDefault();

  const paste = evt.clipboardData.getData("text");
  // 修正正则转义冗余问题
  const emails = paste.match(/[\d\w.-]+@[\d\w.-]+\.[\d\w.-]+/g);

  if (emails) {
    const toBeAdded = emails.filter(email => !isInList(email));
    // 函数式更新确保基于最新状态追加邮箱
    setItem(prevItems => [...prevItems, ...toBeAdded]);
  }
};

3. 修复handleKeyDown中的状态修改问题 #

原代码直接items.push(test)会修改父组件传入的props（违反React单向数据流），改用函数式更新：

const handleKeyDown = (evt: React.KeyboardEvent<HTMLInputElement>) => {
  if (["Enter", "Tab", "|"].includes(evt.key)) {
    evt.preventDefault();

    const test = value.trim();

    if (test && isValid(test)) {
      // 用函数式更新添加新邮箱，避免直接修改props
      setItem(prevItems => [...prevItems, test]);
      setValue("");
    }
  }
};

4. 清理冗余类型，提升代码健壮性 #

把代码中各处的any替换为明确的string类型，同时处理items可能为undefined的情况：

const handleDelete = (item: string) => {
  const result = items?.filter(i => i !== item) || [];
  setItem(result);
};

const handleItemEdit = (item: string) => {
  const result = items?.filter(i => i !== item) || [];
  setItem(result);
  setValue(item);
};

const isValid = (email: string) => {
  let error = null;

  if (isInList(email)) {
    error = `${email} has already been added.`;
  }

  if (!validator.isEmail(email)) {
    setFlag(true);
  }

  if (error) {
    setError(error);
    return false;
  }

  return true;
};

const isInList = (email: string) => {
  return items?.includes(email) || false;
};

关键说明 #

• 函数式更新setItem(prev => [...prev, ...newItems])能确保每次更新都基于最新状态，彻底解决粘贴覆盖问题
• 修正Props类型后，TypeScript会正确识别setItem的函数式更新能力，消除类型错误
• 遵循React单向数据流原则，避免直接修改父组件传入的props，减少潜在bug

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