reactjs - 如何修复 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：点击这里

标签： reactjsaxios

Answer 1

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

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

分叉示例

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

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

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