React+MUI TextField粘贴多地址Chip不即时显示问题求助

问题根源 #

你遇到的问题是直接修改了props传递的items数组但没有触发React状态更新。React的状态更新依赖于setState（这里是父组件传递的setItem），直接对数组做push操作属于原地修改，React无法检测到变化，所以不会重新渲染组件，Chip自然不会显示。按下其他键时触发了onChange更新value状态，才带动组件重渲染，Chip才显示出来。

修复方案 #

1. 修复handlePaste函数

不要直接push到原数组，而是创建新数组，通过setItem更新状态：

const handlePaste = (evt: any) => {
  evt.preventDefault();

  const paste = evt.clipboardData.getData("text");
  const emails = paste.match(/[\w\d\\.-]+@[\w\d\\.-]+\.[\w\d\\.-]+/g);

  if (emails) {
    const toBeAdded = emails.filter((email: any) => !isInList(email));
    // 创建新数组，避免原地修改
    const newItems = [...items, ...toBeAdded];
    setItem(newItems);
  }
};

2. 修复handleKeyDown函数

同样，不要直接push，而是生成新数组后调用setItem：

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

    const test = value.trim();

    if (test && isValid(test)) {
      // 创建新数组，更新状态
      setItem([...items, test]);
      setValue("");
      setError(""); // 清空之前的错误提示
    }
  }
};

3. 优化isValid函数的错误处理

原代码里邮箱验证只设置了flag但没处理错误提示，补充完整：

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

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

  if (!validator.isEmail(email)) {
    error = error || `${email} is not a valid email address.`;
    setFlag(true);
  } else {
    setFlag(false); // 验证通过时重置flag
  }

  setError(error || "");
  return !error;
};

修改后的完整代码 #

import { faCircleQuestion, faXmark } from "@fortawesome/pro-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Chip, TextField } from "@mui/material";
import { JSXElementConstructor, Key, ReactElement, ReactFragment, useRef, useState } from "react";
import validator from "validator";

import styles from "./index.module.scss";

type Props = {
  LabelName?: string;
  optional?: string;
  tooltip?: string;
  placeholder?: string;
  className?: string;
  upload?: boolean;
  items?: string[]; // 明确类型为string数组，避免any
  setItem: (items: string[]) => void;
};
const TagActions = (props: Props) => {
  const [value, setValue] = useState("");
  const [error, setError] = useState("");
  const divRef = useRef<HTMLDivElement>(null);
  const [flag, setFlag] = useState(false);

  const {
    LabelName,
    optional,
    tooltip,
    placeholder,
    className,
    upload,
    items = [], // 给默认值，避免undefined
    setItem,
  } = props;

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

      const test = value.trim();

      if (test && isValid(test)) {
        setItem([...items, test]);
        setValue("");
        setError("");
      }
    }
  };

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

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

    if (!validator.isEmail(email)) {
      error = error || `${email} is not a valid email address.`;
      setFlag(true);
    } else {
      setFlag(false);
    }

    setError(error || "");
    return !error;
  };

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

  const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
    setValue(evt.target.value);
  };

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

    const paste = evt.clipboardData.getData("text");
    const emails = paste.match(/[\w\d\\.-]+@[\w\d\\.-]+\.[\w\d\\.-]+/g);

    if (emails) {
      const toBeAdded = emails.filter((email) => !isInList(email));
      const newItems = [...items, ...toBeAdded];
      setItem(newItems);
    }
  };

  return (
    <>
      <div className="formSection">
        {LabelName && (
          <div className={`control-label ${styles.label}`}>
            <label>
              <span className={styles.alignLeft}>
                <span className={styles.labelText}>{LabelName}</span>
              </span>
            </label>

            <span className={styles.alignRight}>
              {upload && (
                <label htmlFor="uploadCSV">
                  <span className={styles.upload}>Upload CSV</span>
                </label>
              )}

              {optional && <span className={styles.light}>Optional</span>}

              {tooltip && (
                <span className={styles.tooltip_ic} title={tooltip}>
                  <FontAwesomeIcon icon={faCircleQuestion} size="xs" />
                </span>
              )}
            </span>
          </div>
        )}
        <input
          type="file"
          accept=".csv"
          style={{ display: "none" }}
          id="uploadCSV"
        />
        <div className={styles.inputGroup}>
          <TextField
            className={` textfield-emailchip test ${className}`}
            InputProps={{
              startAdornment: items.map((item) => (
                <Chip
                  className={
                    !validator.isEmail(item)
                      ? styles.chipTagError
                      : styles.chipTag
                  }
                  key={item}
                  tabIndex={-1}
                  label={item}
                  onDelete={() => handleDelete(item)}
                  onClick={() => handleItemEdit(item)}
                  deleteIcon={<FontAwesomeIcon icon={faXmark} size="xs" />}
                />
              )),
            }}
            inputRef={divRef} // 修正ref用法，指向输入框元素
            value={value}
            placeholder={placeholder}
            onKeyDown={handleKeyDown}
            onChange={handleChange}
            onPaste={handlePaste}
          />
        </div>

        {error && <p className="error">{error}</p>}
      </div>
    </>
  );
};

export default TagActions;

额外优化点说明 #

• 明确Props里items的类型为string[]，避免any类型的潜在问题
• 给items设置默认空数组，防止undefined导致报错
• 将事件参数类型从any改为React对应类型，提升类型安全性
• 修正TextField的ref用法：用inputRef指向输入框元素，而非外层div

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