Не могу получить ответ данных

Question

Я пытаюсь получить некоторые данные о своем состоянии из поддельного онлайн-интерфейса для отдыха, проблема в том, что данные не попадают в состояние должным образом, поэтому они не отображаются.

Я пытался изменить состояние на массив или просто так 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;

Я хочу получить эти данные в состоянии и показать.

Answer 1

Вы уверены, что 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;
})