консоль показывает, что массивы в состоянии заполнены, но я не могу получить доступ к объекту [0]

Question

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

Как вы можете видеть, журнал покажет мне, что массивы в состоянии были заполнены, хотя и немногопоздно, но я не могу записать первый объект в массивы

У меня такое ощущение, что это как-то связано с циклом реакции рендеринга, но я не могу понять, что именно.Большое спасибо, что нашли время, чтобы просмотреть мой вопрос.

Answer 1

Вы пытались инициализировать свое состояние в методе класса constructor?Таким образом, состояние класса будет инициализировано со значениями по умолчанию перед первой попыткой рендеринга:

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            allEvents: [],
            allArtists: []
        };
    }

    ...
    ...
}

Также я согласен с комментарием Джорджа Чантуридзе об использовании метода жизненного цикла componentDidMount вместо componentWillMount.

ОБНОВЛЕНИЕ: Добавлен фрагмент в неудачной попытке воспроизвести проблему

class App extends React.Component {
  state = {
    concatArray: [],
    es6Array: [],
    pushArray: []
  };

  componentWillMount = () => {
    var concat = this.state.concatArray.concat({
      name: "A_concat",
      value: 1
    }).concat({
      name: "B_concat",
      value: 2
    });
    this.state.pushArray.push({
      name: "C_push",
      value: 3
    });
    this.state.pushArray.push({
      name: "D_push",
      value: 4
    });
    this.setState({
      concatArray: concat,
      es6Array: { ...this.state.es6Array,
        ...[{
          name: "E_es6",
          value: 5
        }, {
          name: "F_es6",
          value: 7
        }]
      }
    });
  };

  render = () => {
    console.clear();
    console.log(this.state);
    console.log(this.state.concatArray);
    console.log(this.state.concatArray[0]);
    console.log(this.state.pushArray);
    console.log(this.state.pushArray[0]);
    console.log(this.state.es6Array);
    console.log(this.state.es6Array[0]);
    return null;
  };
}

const rootElement = document.getElementById("root");
ReactDOM.render( < App / > , rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>