Javascript 尝试从componentDidMount中的ajax调用呈现状态值失败（React）

我在React with Axios中调用了AJAX，对于如何处理响应我有点困惑

这是我的密码：

componentDidMount() {
   axios.get('https://jsonplaceholder.typicode.com/users')
      .then( res => {
         const users = res.data
         this.setState({ users });
      });
}

render() {
   console.log(this.state.users)  
   return (
   <div>
      {this.state.users.map( user => <p>{user.name}</p>)}
   </div>
   )
}

componentDidMount（）{
axios.get（）https://jsonplaceholder.typicode.com/users')
。然后（res=>{
const users=res.data
this.setState（{users}）；
});
}
render（）{
console.log（this.state.users）
返回(
{this.state.users.map（user=>{user.name}
）}
)
}

当I console.log记录结果时，返回两个值：

[]

-分配给初始状态的空数组

API中的预期数组 这大概可以解释为初始化时返回一次状态值，然后使用componentDidMount再次返回

我的问题在于如何访问

this.state.users

值。显然，每当我访问它时，我都希望从AJAX响应返回值，但是如果，例如，我尝试从数组中的第一个对象呈现

name

属性

{this.state.users[0].name}

…它尝试访问

[]

，因此不返回任何内容

但是，如果我尝试遍历数组元素

{users.map（user=>user.name
）}

…它按预期返回值

我不知道为什么它适用于第二个示例，但不适用于第一个示例。当然，如果第一个试图从初始状态值（空数组）中提取数据，那么在通过

this.state.users

进行映射时，它也将尝试通过空数组进行映射，但不返回任何结果或错误

我显然没有完全理解这里的React渲染过程，以及componentDidMount在组件生命周期中的工作方式。我试图将响应值直接分配给state，这是错误的吗

如果有人能帮您解决这个问题，我们将不胜感激。

当您在

this.state.users上使用
map（）
时，最初它将在空数组上执行此操作（该数组不会渲染任何内容）。一旦响应到达，并且调用了
this.setState（{users}）
，
render（）
将再次运行。这一次，用户数组不再为空，将对数组中的每个用户执行
map（）
操作

但是，当您最初在空数组上使用
{this.state.users[0].name}
时，您试图访问尚不存在的对象的
name
属性，这将导致错误。为了防止出现错误，您可以在访问对象的属性之前进行检查：

{this.state.users.length > 0 && this.state.users[0].name}

现在，它将以与第一个示例中相同的方式运行。也就是说，第一个
render（）
实际上不会做任何事情，因为
this.state.users.length=0
。但是，只要新用户调用了
this.setState（）
，就会再次运行
render（）
，这一次
this.state.users[0].name
可用。
当您在
this.state.users
上使用
map（）
时，最初它会在一个空数组上运行（该数组不会渲染任何内容）。一旦响应到达，并且调用了
this.setState（{users}）
，
render（）
将再次运行。这一次，用户数组不再为空，将对数组中的每个用户执行
map（）
操作

但是，当您最初在空数组上使用
{this.state.users[0].name}
时，您试图访问尚不存在的对象的
name
属性，这将导致错误。为了防止出现错误，您可以在访问对象的属性之前进行检查：

{this.state.users.length > 0 && this.state.users[0].name}

现在，它将以与第一个示例中相同的方式运行。也就是说，第一个
render（）
实际上不会做任何事情，因为
this.state.users.length=0
。但是，只要新用户调用了
this.setState（）
，就会再次运行
render（）
，这一次
this.state.users[0]。name
可用。
构造函数还有另一种方法。只需将空数组用户的状态添加为-

   constructor(props) {
      super(props);
      this.state = {
         users: []
      };
   }

首先使用空用户数组呈现此组件。当您触发状态更新时，组件将使用新数组重新加载。
构造函数还有另一种方法。只需将空数组用户的状态添加为-

   constructor(props) {
      super(props);
      this.state = {
         users: []
      };
   }

首先使用空用户数组呈现此组件。当您触发状态更新时，组件将使用新数组重新渲染。
对不起，我的代码段没有包含该内容-这就是我将空数组渲染为“使用”的方式。对不起，我的代码段没有包含该内容-这就是我将空数组渲染为“使用”的方式。谢谢，这很有帮助。以某种方式访问数据仍然感觉有点“黑客”的味道，但如果它起作用，我想：）我其实一点也不认为它有黑客的味道，但你可以用多种方式来做到这一点。一种方法是像这样拉出用户：
firstUser=this.state.users[0]|{}
。那么，
{firstUser.name}
至少不会给你一个错误。就我个人而言，我更喜欢第一种选择。好的，这是一个很好的选择，谢谢。我想我可能只是不习惯React的处理方式-组件呈现的不同生命周期阶段的优点可能会抵消必须提供条件语句来呈现状态值的任何小缺点。当数组为空时，尝试访问
this.state.users[0].name
，无论反应如何，都会导致错误。这实际上只是一个JS错误。我认为混淆可能更多的是关于ajax是异步的。如果您不希望组件在收到数据之前进行渲染，可以返回null、加载微调器等，直到数据出现。谢谢，这很有帮助。以某种方式访问数据仍然有点“黑客”的感觉，但如果它起作用，我想：