Reactjs 如何修复Axios get请求和React挂钩？ 关于我的目标的详细信息：

我想创建一个带有材质UI的React应用程序，根据您的姓名检测性别

问题摘要：

• 我不会返回输入字段中输入的名称的结果

• 预期结果：

  • {姓名：“爱丽丝”性别：“女性”，概率：0.83，计数：3387}

• 实际结果：

  • null

  • 未定义

  • {data:“数据未定义”}

此问题的有用资源：

• 这是指向此问题的CodeSandBox的链接：
• Gender.io API链接（我使用此API检测性别）：
• React的物料界面：

---

代码运行正常，如果名称以小写字母开头，则会抛出错误，因此您可以将用户输入的第一个字母大写

---

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

我通常会返回fetch或axios对象，以便调用组件可以等待响应，并在响应就绪时处理它

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

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

fetchNameData

函数

---

utilities函数中的

checkGender

函数现在直接返回axios对象，这是一个承诺。

fetchNameData

函数是异步的，因此它可以等待此承诺的结果。

任何人都可以帮助用户多次单击detect按钮以获取所需数据。在此之前，诸如“null”和“undefined”之类的响应都会出现。哦，好吧，我点击了一次，得到了数据。工作不正常。尝试使用多个输入。您将发现问题所在。您的示例只有一个输入。如果你的意思是按顺序，它工作得很好。当我给出第一个输入时：结果为空--------当我给出第二个输入时：结果对第二个输入是正确的--------当我给出第三个输入时：结果对第二个输入是正确的--------当我给出第四个输入时：结果对第三个输入是正确的--------我怎么能解决这个问题你是在谈论你的代码沙盒，还是我在回答中分享的正确的代码沙盒？您没有正确处理异步代码，即在API返回结果之前更新显示。因此，是的，它将开始为空，然后是一个提交落后。但是看看我的叉子，你会看到，因为我们现在在等待响应，所以它们排列正确。