如何修复 Axios 获取请求和 React Hooks？

Question

关于我的目标的详细信息：

我想创建一个带有 Material UI 的 React App，它可以根据你的名字检测性别。

问题总结：

• 我没有取回输入字段中输入的名称的结果

• 预期结果：

  • {name: "Alice" gender: "female", probability: 0.83, count: 3387}

• 实际结果：

  • null
  • undefined
  • {data: "Data was undefined"}

此问题的有用资源：

• 这是此问题的 CodeSandBox 的链接： 单击此处--查看我尝试过的内容
• Gender.io API 链接（我用这个 API 来检测性别）：点击这里
• React 的 Material UI：点击这里

Answer 1

我认为您的代码有点过度设计，并且没有正确处理请求的异步性质。

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

分叉示例

如您所见，我已从您的 Container.jsx 组件中删除了几部分（可能需要一个不同的名称）。

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

The checkGender function from your utilities function now directly returns the axios object, which is a promise. fetchNameData function 是异步的，因此它可以等待来自此 promise 的结果。

Answer 2

代码工作正常，如果名称以小写开头，会抛出错误，所以你可以做的是大写用户输入的第一个字母