Reactjs 无法获取数据响应

我试图从一个伪造的在线RESTAPI获取一些数据到我的状态，问题是数据没有正确地到达状态，所以它没有显示出来

我已尝试将状态更改为array或类似于此

firstName:“”，
…

但它仍然不起作用

import React, { Component } from 'react';
import axios from 'axios';

class Success extends Component {
  state = {
    firstName: [],
    username: [],
    email: [],
    id: [],
    show: false
  };

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

  onClick = () => {
    this.setState(prevState => ({ show: !prevState.show }));
  };
  render() {
    return (
      <div>
        <h1
          className="font-weight-light"
          style={{
            color: 'black',
            marginTop: '50px'
          }}
        >
          UserList:
        </h1>
        <div className="mt-5">
          <ul className="list-group">
            <li className="list-group-item">
              {this.state.firstName}
              <div
                className="fas fa-angle-down"
                style={{ marginLeft: '98%' }}
                onClick={this.onClick}
              />
            </li>
            {this.state.show === true ? (
              <li className="list-group-item">
                Username: {this.state.username}
              </li>
            ) : null}
            {this.state.show === true ? (
              <li className="list-group-item">Email: {this.state.email}</li>
            ) : null}
            {this.state.show === true ? (
              <li className="list-group-item">ID: {this.state.id}</li>
            ) : null}
          </ul>
        </div>
      </div>
    );
  }
}

export default Success;

从“React”导入React，{Component}；
从“axios”导入axios；
类成功扩展组件{
状态={
名字：[]，
用户名：[]，
电子邮件：[]，
id:[]，
节目：假
};
componentDidMount（）{
axios
.get（'https://jsonplaceholder.typicode.com/users')
.then（res=>this.setState（{firstName:res.data.name}））；
}
onClick=（）=>{
this.setState（prevState=>（{show:！prevState.show}））；
};
render（）{
返回(
用户列表：


{this.state.firstName}

{this.state.show==true(

用户名：{this.state.Username}

)：null}
{this.state.show==true(
电子邮件：{this.state.Email}
)：null}
{this.state.show==true(
ID:{this.state.ID}
)：null}

);
}
}
导出默认值成功；

---

我想获取状态中的数据并显示。

您确定

res.data.name

存在吗

似乎

res.data

返回数组

您应该使用null声明用户状态，并将用户状态设置为

res.data

之后，您可以使用

Array.prototype.map

和

res.data

比如说,

state = {
   users: null,
   whatever: ''
}

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

...

// write function that takes id as parameter.
this.state.users.map(item => {
    if(item.id === id){
        this.setState({
            whatever: item.name
        })
    } return item;
})

---

尝试将console.log添加到axios.then（）函数中，查看数据是否正确接收，并告知我们