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

Question

我用 Axios 在 React 中进行了 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>
   )
}

当我console.log结果时，两个值是returned：

[] - 分配给初始状态的空数组
来自 API 的预期数组。

这大概可以解释为状态值在初始化时被 returned 一次，然后再次使用 componentDidMount。

我的问题出在如何访问 this.state.users 值上。显然，每当我访问它时，我都想要 AJAX 响应中的值 returned，但是，例如，如果我尝试从第一个对象渲染 name 属性在数组中...

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

...它试图访问 []，因此 return 什么都没有。

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

{users.map( user => <p>user.name</p> )}

...它 return 是预期的值。

我不知道为什么它适用于第二个示例而不适用于第一个。当然，如果第一个尝试从初始状态值（一个空数组）中提取数据，那么当 mapping 到 this.state.users 时，它也会尝试通过一个空数组进行映射return 什么都没有，或者是一个错误。

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

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

Answer 1

当您最初在 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}

现在它的行为方式与第一个示例相同。 IE。第一个 render() 实际上不会做任何事情，因为 this.state.users.length = 0。但是一旦用新用户调用this.setState()，render()就会再次运行，这次this.state.users[0].name可用。

Answer 2

构造函数还有另一种方式。只需将您的状态与空数组用户添加为-

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

首先使用空用户数组呈现此组件。当您触发状态更新时，组件会使用新数组重新渲染。

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

Attempt to render state value from ajax call in componentDidMount failing (React)

javascript

arrays

ajax

state

reactjs