使用SWR基于下拉框选中值请求数据，重选旧值返回数据异常求解

问题根因与解决方案 #

1. 核心问题：Formik 不会响应传入的data prop更新

useFormik的initialValues仅在组件第一次初始化时生效，后续EntityForm的data prop更新时，Formik不会自动同步修改表单值。你切换回之前选过的选项时，EntityForm没有重新挂载，所以表单显示的还是第一次加载该选项时的旧数据。

解决方案二选一即可：

• 方案1：给EntityForm添加唯一key，每次选中的实体变更时强制组件重新挂载，触发Formik重新初始化

// 修改你的渲染逻辑部分
<EntityForm key={currentEntity?.entity_id} data={entities} />

• 方案2：在EntityForm内添加useEffect监听data变化，手动更新Formik值

// 在EntityForm组件内添加这段逻辑
useEffect(() => {
  if (!data) return
  formik.resetForm({
    values: {
      company_name: data.company_name ?? "",
      company_type: data.company_type ?? "",
      // 完整复制你之前写在initialValues里的所有字段即可
      documents: []
    }
  })
}, [data, formik])

2. SWR去重配置的潜在影响

你当前设置了dedupingInterval: 12000，意味着12秒内相同接口地址的请求会被SWR去重，直接返回缓存结果，不会发起新请求拉取最新数据。如果你需要每次切换下拉选项都拉取最新数据，可以修改SWR配置：

const { data: entities } = useSWR(
  currentEntity?.entity_id ? "/api/entities/" + currentEntity.entity_id : null,
  { 
    dedupingInterval: 0, // 关闭请求去重
    revalidateOnMount: true // 组件挂载时强制重新拉取数据
  }
);

3. 下拉框显示逻辑小缺陷

你自定义的ListBox组件中，按钮显示值的逻辑{value || value.title || placeholder}存在兼容问题：如果后续你把下拉选中值改成对象类型，value.title会正常取值，但是如果value是你当前用的字符串类型，value.title会返回undefined，虽然当前场景不影响运行，建议调整为更安全的写法：

<span className={`block truncate ${value ? "" : "text-base text-gray-400"} `}>
  {value?.title || value || placeholder}
</span>

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