Question

我试图在React中使用Axios进行一次简单的AJAX调用，但我无法弄清楚我哪里出错了。

这是我到目前为止（在我的组件中）：

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

render() {
   console.log(this.state.users)   // returns the **initialised EMPTY array**
   return (
   <div>
      {this.state.users.map( user => <p>{user.name}</p>)} // returns nothing
   </div>
   )
}

我正在访问.get()方法中给出的URL处的一个简单数组（如果需要，请查看它的结构）。然后我链接.then()承诺并在箭头函数中传递res参数。

然后我将users变量分配给结果，并尝试将状态设置为此。 所以在这一点上，我希望this.state.users等于生成的数组。

然而......

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

B）当我尝试渲染数组的映射时，再次遍历每个对象的name属性。

我哪里错了？

Answer 1

来自错字的部分（如Phi Nguyen所说），还有一些其他问题需要解决：

1）Axios使用响应对象解析promise。所以要获得你需要做的结果：

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

在此处查看有关响应对象的文档：https://github.com/mzabriskie/axios#response-schema

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.
   })

Answer 2

错字。它应该是componentDidMount而不是ComponentDidMount。

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

2 个答案: