将选定值传递给 Get 请求答案

【问题标题】：Pass Selected Values to a Get request将选定值传递给 Get 请求
【发布时间】：2021-08-17 23:52:31
【问题描述】：

我的目标是将表单中选择的值传递给get 请求。

请求应如下所示，位于values 的submit 之后。

get(api/csv/pets/?columns=DOG&columns=CAT&columns=FISH)

onSubmit={async (values, { resetForm }) => {
    alert(JSON.stringify(values, null, 2));
    setCsvData(values);
    console.log(csvData);  
    const getCsvFile = async (values) => {
      try {
        const { data } = await fetchContext.authAxios.get(
          `/api/csv/pets/${id}/?columns=${csvData ? csvData + '&' : null}`, values);
    
        toCsv(data);
      } catch (err) {
        console.log(err);
      }
    };
    getCsvFile();

但是，即使 formik 采用了值的有效负载，当将其放在 csvData 和 setCsvData(values) 中时，我仍然无法定义。

如何获取查询中选择的值以及所需格式？

我的数据：

export const CheckList = [
  {
    id: 'column-dog',
    label: 'Dog',
    value: 'DOG',
    name: 'column',
  },
  {
    id: 'column-cat',
    label: 'Cat',
    value: 'CAT',
    name: 'column',
  },
  {
    id: 'column-turtle',
    label: 'Turtle',
    value: 'TURTLE',
    name: 'column',
  },
  {
    id: 'column-fish',
    label: 'Fish',
    value: 'FISH',
    name: 'column',
  },
]

我的表格：

const [csvData, setCsvData] = useState([]);
const selectAllData = CheckList.map((checkbox) => checkbox.value);


return (
     <Formik
        initialValues={{
           columns: [],
           selectAll: false,
        }}
        onSubmit={async (values, { resetForm }) => {
          alert(JSON.stringify(values, null, 2));
          setCsvData(values);
          console.log(csvData);
          resetForm();
        }}
        >
         {({ values, setFieldValue }) => (
           <Form>
            <div>
              <Field
                onChange={() => {
                  if (!values.selectAll) {
                    setFieldValue('columns', selectAllData);
                  } else {
                    setFieldValue('columns', []);
                  }
                  setFieldValue('selectAll', !values.selectAll);
                }}
                checked={values.selectAll}
                type="checkbox"
                name="selectAll"
              />{' '}
              Select All
            </div>
    
          {CheckList.map((checkbox) => (
            <div key={checkbox.value}>
              <label>
                <Field
                  type="checkbox"
                  name="columns"
                  value={checkbox.value}
                 />{' '}
                 {checkbox.label}
               </label>
             </div>
           ))}
    
          <button
            className="btn"
            type="submit"
            download
          >
            DOWNLOAD CSV
          </button>
        </Form>
      )}
    </Formik>
)

【问题讨论】：

标签： reactjs csv formik

【解决方案1】：

我认为您的代码有点过于复杂了。从状态中删除csvData，并将values 传递给请求。

onSubmit={async (values, { resetForm }) => {
    const getCsvFile = async () => {
      try {
        const { data } = await fetchContext.authAxios.get(
          `/api/csv/pets/${id}/?columns=${values ? values + '&' : null}`, values);
        toCsv(data);
      } catch (err) {
        console.log(err);
      }
    };
    getCsvFile();
}

您收到错误是因为在设置 csvData 之前触发了请求。 setState 是异步的 :)

【讨论】：

【解决方案2】：

你不能在异步函数中使用 setState，因为 setState 本身就是一个异步函数，它不会返回一个 Promise。因此，我们不能将async/await 用于setState 方法。（如果无法使用await，则状态更改将立即触发undefined 值而不是设置给定的值）

因此，最好的用例是从 onSubmit() 函数中删除 async 以使其同步。因此，setState 会异步触发组件的状态变化。

然后在表单重置后保留getCsvFile(values)，因为您已经这样做了。并将getCsvFile() 函数保留在组件之外，因为它不会进行任何与状态相关的更改。

      onSubmit={(values, { resetForm }) => {
        alert(JSON.stringify(values, null, 2));
        setCsvData(values);
        console.log(csvData);
        resetForm();

        getCsvFile(); // this function will trigger asynchronously
      }}

【讨论】：