如何在React组件内实现表单中Pill标签对应值的删除功能

云上老周

2026-9-30

功能修复方案

现有代码问题

变量拼写错误：setValues(updatedvalues) 中变量名大小写和上方定义的updatedValues不一致，会直接触发引用报错
状态修改不符合不可变原则：直接赋值updatedValues = values是引用原状态数组，修改时容易引发不可预期的副作用
数据源不同步：你当前用substanceDetails数组渲染Pill组件，但handleChange修改的是values状态，二者没有关联会导致删除后视图不更新

修复步骤

1. 同步初始化状态

如果substanceDetails是接口返回的初始数据，首次加载时把值同步给values作为渲染的唯一数据源：

useEffect(() => {
  if(substanceDetails) {
    // 初始化把substance值同步到values状态
    setValues(substanceDetails.map(item => item.substance))
  }
}, [substanceDetails])

2. 修正handleChange函数

const handleChange = (value, mode) => {
  // 先拷贝原状态生成新数组，遵循不可变原则
  let updatedValues = [...values];
  if (mode === 'remove') {
    updatedValues = updatedValues.filter((elem) => elem !== value);
  } else if (!updatedValues.includes(value)) {
    updatedValues.push(value);
  }
  // 修正变量名大小写
  setValues(updatedValues);
};

3. 调整Pill渲染逻辑，统一用values作为数据源

{values?.map((substanceVal) => (
  <Pill
    registerInput={register}
    optionLabel="substance"
    value={substanceVal}
    key={substanceVal}
    optionName="substance"
    allOptions={["Dexamphetamine", "Ritalin"]}
    handleChange={handleChange}
  />
))}