代码之家 › 专栏 › 技术社区 › sergioac

如何在react js中使用带有自定义钩子的表单数据?

axios react-hooks reactjs

sergioac · 技术社区 · 2 年前

我有自己定制的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);

1 回复 | 直到 2 年前

Drew Reese 2 年前

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

看见 Instance Methods

试试看:

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

对于GET、DELETE、HEAD和OPTIONS请求,省略data参数。

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

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

或者,你可以使用 request config :

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

推荐文章

Jonas · 反应挂钩-编辑后更新列表中的项目

2 年前

Selcukusu · 为什么在show-axios-react之后无法清除错误消息

2 年前

swamp blues · 如何从自定义挂钩收集和返回多个函数

2 年前

Daniel · 钩子中的状态跟踪和道具-React如何保持(跟踪)钩子中的状态和道具?

2 年前

Ben_Sven_Ten · 使用自定义IntersectionObserver钩子响应钩子/穷举deps警告

2 年前

FettFrank · 测量渲染React组件的时间

2 年前

ManP22 · 我想在同一次单击中调用两个常量

2 年前

Dhruv B. · 为什么{text.length}在react中不起作用。js代码。我想要更改状态文本的长度。请帮帮我

2 年前

user15137953 · 已求解的对象作为React子对象无效。如果要渲染子级集合,请改用数组。反应

2 年前

David · 如何多次使用fetch-get响应?

2 年前