React-Formik下拉框选择时出现循环结构转换错误求助

问题根源 #

选择客户端下拉框选项时触发converting circular structure to JSON错误，核心原因是你的FormSelect组件在onChange中传递了整个ChangeEvent事件对象给Formik的helpers.setValue，而事件对象内部存在循环引用（比如事件对象的target指向DOM元素，DOM元素又反向关联事件），当onSubmit里执行JSON.stringify(values)时，就会因为无法序列化循环结构报错。

修复代码 #

修改FormSelect组件中的onChange回调，只传递选中的value值：

const FormSelect = ({ name, options }) => {
    const [field, meta, helpers] = useField(name);

    console.log(options);
    return (
      <>
        <FormControl.Select
          size="lg"
          name={name}
          value={field.value}
          // 修复这里：获取事件目标的value而非整个事件对象
          onChange={(v) => helpers.setValue(v.target.value)}
          >
          {options.map((option) => (
            <option key={option.key} value={option.key}>
              {option.value}
            </option>
          ))}
        </FormControl.Select>
      </>
    );
  };

额外检查点 #

• 确认clientItems.map转换后的选项对象（{ "value": client.Value, "key": client.Key }）中，client.Value和client.Key都是普通的字符串/数值，不包含循环引用的对象。
• 确保Formik的initialValues里ClientId的初始值类型（空字符串）和选项的value类型一致，避免类型不匹配引发的其他异常。

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