Целиком вывожу данные в консоль с JSON API, но не могу достать глубже целого объекта, кто сталкивался?

Question

[kkdima]

При попытке вывести в консоль сгенерированные данные забраные через fetch() и JSON API выдает ошибку:
Ошибка вылетает когда указываю конкретную информацию внутри обьекта: console.log(this.state.users[0].id);
Но только если дать путь к целому обьекту console.log(this.state.users[0]); – в консоле отображаются все собранные данные.

Кто сталкивался с подобной проблемой или знает решение?
Возможно как-то не правильно обновляется state? .then вместо async выдавал тот же результат

ссылка на репо: https://github.com/kkdima/p1

Исходный код компонента:
PS. такой странный jsx из-за styled-components для стилей

export default class Card extends Component {
  constructor(props) {
    super(props);
    this.state = { users: [] };
  }
  async componentWillMount() {
    try {
      const response = await fetch('https://my.api.mockaroo.com/random_user.json?key=f88bf740');
      const data = await response.json();
      this.setState({ users: data});
    } catch (error) {
        console.log('error');
      }
  }

  render() {
    console.log(this.state.users[0]);
    return (
      <InvestorBoxWrapper>
        <InvestorBox>
          <WithAva>
            <Img src={'https://api.adorable.io/avatars/75/[e-mail]'}/>
            <WithAvaH3>
              <H3>{}</H3>
              <H3>Telecomunication Engineer</H3>
            </WithAvaH3>
          </WithAva>
          <P>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae</P>
        </InvestorBox>
      </InvestorBoxWrapper>
    )
  }
}

Вопрос #2
Как избавится от первого undefined в concole.log?
Какой метод использовать чтобы зарендерить на момент когда есть все данные данные? componentWillMoun почему-тоt на это не влияет в моем коде

Answer 1

[Алексей Уколов]

Ошибка возникает ещё при самом первом рендере, до того даже, как будет отправлен запрос данных, поэтому что бы вы там не меняли, толку не будет.
На все ваши вопросы ответ один: нужно в render() проверять есть данные или нет и исходя из этого рендерить тот или иной ответ:

render() {
    if (!this.state.users[0]) {
        return null; // Или что угодно
    }

    return (
      <InvestorBoxWrapper>
        <InvestorBox>
          <WithAva>
            <Img src={'...'}/>
            <WithAvaH3>
              <H3>{this.state.users[0].id}</H3>
              <H3>...</H3>
            </WithAvaH3>
          </WithAva>
          <P>...</P>
        </InvestorBox>
      </InvestorBoxWrapper>
    )
}

Какой метод использовать чтобы зарендерить на момент когда есть все данные данные?

Нет такого.