我该如何修复 Axios 获取请求和 React Hooks?
2021-01-24
283
有关我的目标的详细信息:
I want to create a React App with Material UI that detects gender on the basis of your name.
问题摘要:
-
我没有得到输入字段中输入的名称的结果
-
预期结果:
-
{name: "Alice" gender: "female", probability: 0.83, count: 3387
-
-
实际结果:
-
null
-
undefined
-
{data: "Data was undefined">
-
此问题的有用资源:
- 这是链接针对此问题,请转到 CodeSandBox: 点击此处 - 查看我已尝试的方法
- Gender.io API 链接(我使用此 API 检测性别): 点击此处
- Material UI for React: 点击此处
2个回答
我认为您的代码有点过度设计,并且不能正确处理请求的异步特性。
我通常所做的是返回 fetch 或 axios 对象,以便调用组件可以等待响应并在准备好时处理它。
如您所见,我从您的 Container.jsx 组件中删除了几个部分(可能需要不同的名称)。
我没有为准备提交的表单设置标志,而是让按钮直接调用
fetchNameData
函数。
您的实用程序函数中的
checkGender
函数现在直接返回 axios 对象,这是一个承诺。
fetchNameData
函数是异步的,因此它可以等待此承诺的结果。
tmdesigned
2021-01-24