开发者问题收集

我该如何修复 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">

此问题的有用资源:

2个回答

我认为您的代码有点过度设计,并且不能正确处理请求的异步特性。

我通常所做的是返回 fetch 或 axios 对象,以便调用组件可以等待响应并在准备好时处理它。

分叉示例

如您所见,我从您的 Container.jsx 组件中删除了几个部分(可能需要不同的名称)。

我没有为准备提交的表单设置标志,而是让按钮直接调用 fetchNameData 函数。

您的实用程序函数中的 checkGender 函数现在直接返回 axios 对象,这是一个承诺。 fetchNameData 函数是异步的,因此它可以等待此承诺的结果。

tmdesigned
2021-01-24

代码运行正常,如果名称以小写字母开头,则会引发错误,因此您可以做的是将用户输入的首字母大写 在此处输入图像描述

Fehmy
2021-01-24