Доступ к значениям состояния внутри метода render ()

Question

Я построил очень простое состояние следующим образом:

state = {
  nested: Array [
    0: {a:'a'},
    1: {a:'a'}, 
    2: {a:'a'},
    3: {a:'a'}...
  ]
}

Где nested получает значения из удаленного источника (Firebase).

Я пробовал 3 способа доступа к значению a последнего элемента массива :

1. Object.values(this.state.nested)[Object.values(this.state.nested).length-1].a
2. Object.values(this.state.nested)[Object.values(this.state.nested).length-1]['a']
3. Object.values(this.state.nested).map(e=>e.a).pop()

1-й и 2-й методы работают нормально в консоли, но дают мне undefined внутри метода React render ().
И все это несмотря на то, что они возвращают вложенные объекты, которые я проверил по typeof.

Я могу подозревать, почему это так, но почему тогда работает третий метод?
Я думаю, что есть причина такого поведения, но не могу себе представить ни одной.

Answer 1

Скорее всего, это происходит потому, что компонент визуализируется один раз перед загрузкой данных. Есть два простых способа обойти эту проблему:

1. установить состояние по умолчанию для компонента в конструкторе
2. установите флажок в функции рендеринга, чтобы убедиться, что вложенные элементы содержат

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    
    //option #1
    state = {
      nested: [{a:'default value'}]
    };
  }
}

OR

class ExampleComponent extends React.Component {
  render() {
    return (
      {
        //option #2
        this.state.nested && this.state.nested.length > 0 ? 
        (//return div using the nested information here ) :
        (//return div in the case nested is empty )
      }
    );
  }
}

Если вы загружаете данные в функцию componentDidMount (), то React выполнит повторную визуализацию компонента после загрузки этих данных. Обязательно используйте this.setState () в componentDidMount ().