React中Antd Form.List选销售选项触发合成事件复用警告求助

问题重现 #

在React项目中使用Ant Design的Form.List组件时，每次选择销售人员选项，控制台都会弹出大量警告：

index.js:1 警告：出于性能考虑，此合成事件会被复用。如果你看到这条信息，说明你正在访问一个已被释放/无效化的合成事件的pageX属性，该属性已被设为null。如果你必须保留原始合成事件，请使用event.persist()。

相关代码如下：

<Form.List name="salesmans" initialValue={personList}>
    {(fields, { add, remove }) => {
      const newfields = fields.filter(
        (field) => field.name !== '0'
      )
      return (
        <>
          {newfields.map((field, index) => (
            <React.Fragment key={index}>
              <Col md={10}>
                <AutoFieldComponent
                  name={[field.name, 'salesperson']}
                  label={`Salesman ${index + 1}`}
                  options={salesOptions}
                  rules={[
                    {
                      required: index === 0,
                      message: 'Please select Salesman',
                    },
                  ]}
                  filterOption={(input, option) => {
                    return option?.label
                      ?.toLowerCase()
                      .includes(input?.toLowerCase())
                  }}
                  existingValue={
                    projectData?.salesPersons[field?.name]
                  }
                  placeholder={`select salesman ${index + 1}`}
                  type="text"
                  values={0}
                />
              </Col>
              <div className="detete-icon">
                <Button
                  title={'Delete Salesman'}
                  onClick={() => {
                    remove(field.name)
                  }}
                  disabled={index === 0}
                  icon={<DeleteIcon />}
                />
              </div>
            </React.Fragment>
          ))}
          <Col md={12} className="sales-btn">
            <Button
              onClick={add}
              type="link"
              className="add-package"
              label="Add another salesman"
              icon={<AddPackage />}
            />
          </Col>
        </>
      )
    }}
  </Form.List>

原因分析 #

这个警告源于React的合成事件复用机制：React为了优化性能，会在事件回调执行完毕后清空合成事件对象的属性并复用它。如果你的代码（尤其是自定义的AutoFieldComponent）在事件回调完成后仍尝试访问事件对象的属性，就会触发该警告。

解决方案 #

1. 修复自定义组件AutoFieldComponent的事件处理 #

检查AutoFieldComponent内部的onChange或相关事件回调逻辑：

• 如果存在异步操作（比如防抖、节流、setTimeout），提前提取事件中的值，不要直接持有事件对象：

  // 错误写法：异步中访问事件对象
  const handleChange = (e) => {
    setTimeout(() => {
      setValue(e.target.value);
    }, 100);
  };
  
  // 正确写法：先提取值再使用
  const handleChange = (e) => {
    const selectedValue = e.target.value;
    setTimeout(() => {
      setValue(selectedValue);
    }, 100);
  };
  

2. 必要时使用event.persist() #

如果必须保留完整的事件对象，在回调开头调用event.persist()，阻止React复用该事件：

const handleChange = (e) => {
  e.persist(); // 让事件对象不被回收
  // 后续可安全访问e的所有属性
};

3. 修正Form.List的字段过滤逻辑 #

你当前通过filter(field => field.name !== '0')修改了原始fields，这可能破坏Form.List的内部状态映射，间接引发事件异常。建议：

• 不要直接过滤fields，而是通过调整initialValue（比如初始化时就排除name为'0'的项）；
• 或者在添加/删除字段时控制列表内容，避免修改Form.List返回的原始fields数组。

4. 检查filterOption函数的纯数据处理 #

确保filterOption是纯函数，仅处理传入的input和option数据，不要间接引用任何合成事件对象。如果input值来自事件，提前提取后再传入该函数。

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