如何在 React JS 中使用带有自定义钩子的表单数据？

Question

我有我的自定义 axios 挂钩，发送没有文件的数据它工作得很好，但是当我发送文件时它无法识别任何数据。

......
const axiosFetch = async (params) => {
const { method, url, data } = params;
try {
  setLoading(true);
  const control = new AbortController();
  setController(control);

  const res = await axios[method.toLowerCase()](url, {
    ...data,
    signal: control.signal,
  });

  setResponse(res.data);
} catch (err) {
  setError(err);
} finally {
  setLoading(false);
}
};
......

如果我修改这部分，文件上传可以，但是会丢失信号。如何实现这两个属性。

   const res = await axios[method.toLowerCase()](url, data);

Answer 1

对于POST，PUT和PATCH请求数据和配置是第二个和第三个参数。

见Instance Methods

试试看：

const res = await axios[method.toLowerCase()](
  url,
  data,
  { signal: control.signal }
);

对于 GET、DELETE、HEAD 和 OPTIONS 请求，省略数据参数。

const res = await axios[method.toLowerCase()](
  url,
  { signal: control.signal }
);

您需要从逻辑上拆分这些请求类型。

或者您可以使用 request config:

const res = await axios({
  url,
  method: method.toLowerCase(),
  data,
  signal: control.signal,
});

如何在 React JS 中使用带有自定义钩子的表单数据？

how to use form data with custom hook in react js?

reactjs

axios

react-hooks