Javascript React中的Axios AJAX调用仅返回初始状态

我试图在React中使用Axios进行一个简单的AJAX调用，但我不知道哪里出了问题

以下是我到目前为止（在我的组件中）所拥有的内容：

ComponentDidMount（）{
axios.get（）https://jsonplaceholder.typicode.com/users')
。然后（res=>{
const users=res
this.setState（{users}）；
});
}
render（）{
console.log（this.state.users）//返回**初始化的空数组**
返回(
{this.state.users.map（user=>{user.name}
）}//不返回任何内容
)
}

我正在访问

.get（）

方法中给定的URL处的一个简单数组（如有必要，请查看它的结构）。然后，我在

.then（）

promise上进行链接，并在arrow函数中传递

res

参数

然后我将

users

变量分配给结果，并尝试将状态设置为这样因此，此时我希望this.state.users与结果数组相等。

然而

A） 当我尝试console.log（this.state.users）时，它返回初始化的空数组

B） 当我尝试渲染数组的贴图时，在每个对象上迭代

name

属性，同样，什么都没有

我哪里出错了？

打字错误的一部分（正如Phi Nguyen所指出的），还有一些其他问题需要解决：

1） Axios使用响应对象解析承诺。因此，要获得结果，您需要执行以下操作：

   axios.get('https://jsonplaceholder.typicode.com/users')
     .then( res => {
      const users = res.data;  // Assuming the response body contains the array
      this.setState({ users });
    });

在此处查看有关响应对象的文档：

2） 如果出现异常（您的请求失败），您可能希望处理它，而不是接受它。因此：

 axios.get('https://jsonplaceholder.typicode.com/users')
   .then( res => {
     const users = res.data;  // Assuming the response body contains the array
     this.setState({ users });
   })
   .catch(err => {
      // Handle the error here. E.g. use this.setState() to display an error msg.
   })

打字错误的一部分（正如Phi Nguyen所指出的），还有一些其他问题需要解决：

1） Axios使用响应对象解析承诺。因此，要获得结果，您需要执行以下操作：

   axios.get('https://jsonplaceholder.typicode.com/users')
     .then( res => {
      const users = res.data;  // Assuming the response body contains the array
      this.setState({ users });
    });

在此处查看有关响应对象的文档：

2） 如果出现异常（您的请求失败），您可能希望处理它，而不是接受它。因此：

 axios.get('https://jsonplaceholder.typicode.com/users')
   .then( res => {
     const users = res.data;  // Assuming the response body contains the array
     this.setState({ users });
   })
   .catch(err => {
      // Handle the error here. E.g. use this.setState() to display an error msg.
   })

---

打字错误。它应该是

componentDidMount

，而不是

componentDidMount

打字错误。应该是

componentDidMount

而不是

componentDidMount

起作用-谢谢。但是我有点困惑-当我

console.log

记录结果时，返回两个值：

[]

，以及来自API的预期数组。这大概可以解释为初始化时返回一次状态值，然后使用componentDidMount再次返回。但是，当我尝试访问数组中的单个对象时，例如，

this.state.users[0]

它会尝试访问空数组。我只能通过数组映射才能得到它。是否有办法每次都将更新的

this.state.users

值作为目标，并避免拉入初始状态值？每次调用this.setState时，都会再次调用render方法以反映组件的新状态。请参见此图表：因此您有一个初始呈现（当用户未初始化时），然后在componentDidMount之后有第二个呈现，在调用setState之后有第三个呈现（此时您有用户列表）。您可以在组件构造函数中初始化列表。通常在渲染方法中，您可以检查

this.state.users

是否为空，并显示加载程序或其他内容。这很有效-谢谢。但是我有点困惑-当我

console.log

记录结果时，返回两个值：

[]

，以及来自API的预期数组。这大概可以解释为初始化时返回一次状态值，然后使用componentDidMount再次返回。但是，当我尝试访问数组中的单个对象时，例如，

this.state.users[0]

它会尝试访问空数组。我只能通过数组映射才能得到它。是否有办法每次都将更新的

this.state.users

值作为目标，并避免拉入初始状态值？每次调用this.setState时，都会再次调用render方法以反映组件的新状态。请参见此图表：因此您有一个初始呈现（当用户未初始化时），然后在componentDidMount之后有第二个呈现，在调用setState之后有第三个呈现（此时您有用户列表）。您可以在组件构造函数中初始化列表。通常在渲染方法中，您可以检查

this.state.users

是否为空，并显示加载程序或其他内容。