如何将Formik表单选中值传入GET请求并生成符合要求的columns查询参数

问题根源 #

1. React的setState是异步更新，调用setCsvData后当前执行上下文的csvData还是旧值，所以无法立刻拿到最新的赋值结果，且这个state完全冗余，onSubmit回调已经直接提供了最新的表单values可以直接使用。
2. 原有参数拼接逻辑错误，无法生成多columns键的查询串，且Axios默认的数组参数序列化规则是生成columns[]=xxx格式，不符合你的需求。

解决方案 #

第一步：删除冗余的csvData状态 #

删掉这行代码即可：

const [csvData, setCsvData] = useState([]);

第二步：修改onSubmit提交逻辑 #

直接用表单返回的values.columns生成符合要求的查询参数，这里提供两种实现方案：

方案1：用Axios自带配置 + qs序列化（推荐）

首先安装qs库（如果项目没有的话）：npm install qs，然后修改onSubmit代码：

onSubmit={async (values, { resetForm }) => {
  try {
    const { data } = await fetchContext.authAxios.get(
      `/api/csv/pets/${id}/`, // 注意确认你的id变量是否正确定义
      {
        params: {
          columns: values.columns
        },
        // 配置序列化规则，把数组转成重复key的格式
        paramsSerializer: (params) => {
          return qs.stringify(params, { arrayFormat: 'repeat' })
        }
      }
    );
    toCsv(data);
  } catch (err) {
    console.log(err);
  } finally {
    resetForm();
  }
}}

方案2：手动拼接查询串（不需要额外依赖）

如果不想引入qs，可以自己手动拼接参数：

onSubmit={async (values, { resetForm }) => {
  try {
    // 拼接查询参数
    const queryStr = values.columns.map(col => `columns=${encodeURIComponent(col)}`).join('&');
    const { data } = await fetchContext.authAxios.get(
      `/api/csv/pets/${id}/?${queryStr}`
    );
    toCsv(data);
  } catch (err) {
    console.log(err);
  } finally {
    resetForm();
  }
}}

注意事项 #

• 确认你的id变量是否在组件作用域内正确定义，避免url拼接错误
• 如果用户没有勾选任何选项，values.columns是空数组，此时拼接的查询串为空，符合无参数的请求需求

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