В this.state.companiesIncome меня есть массив из 50 объектов с {value and date} , но когда я пытаюсь console.log(this.state.companiesIncome[2].value) я получаю TypeError: Cannot read property '2' of null . Что я делаю не так?

 import React, { Component } from 'react' import './CompanyTotalIncome.css' import axios from 'axios' class CompanyIncome extends Component { constructor(props) { super(props) this.state = { companyID: props.companyID, companiesIncome: null } } componentWillMount() { axios.get(`https://API/${this.state.companyID}`).then(res ={amp}gt; { this.setState({ companiesIncome: res.data.incomes }) }) } render() { console.log(this.state.companiesIncome[2].value) return ( {amp}lt;{amp}gt; {amp}lt;th{amp}gt;Total income{amp}lt;/th{amp}gt; {amp}lt;/{amp}gt; ) } } export default CompanyIncome 

componentWillMount устарел.

Используйте componentDidMount вместо componentWillMount чтобы сделать вызов AJAX.

 componentDidMount() { axios.get(`https://API/${this.state.companyID}`).then(res ={amp}gt; { this.setState({ companiesIncome: res.data.incomes }); }); } 

И поместите чек перед использованием this.state.companiesIncome

 this.state.companiesIncome {amp}amp;{amp}amp; console.log(this.state.companiesIncome[2].value); 

Вы видите ошибку до того, как axios.get запустит AJAX-вызов, который по своей природе асинхронный. И ваш метод render любом случае будет вызван перед componentDidMount . Таким образом, к моменту this.state.companiesIncome журнала this.state.companiesIncome все равно будет иметь значение null .

После того, как componentDidMount вызван, данные API setState и setState , он запускает повторную визуализацию, и метод render вызывается снова. На этот раз с companiesData установлено. Так что это будет работать, как ожидалось.

Вот демонстрационный пример рабочего кода для вашего реф.

Поскольку в начальном состоянии ваш companiesIncome равен нулю, companiesIncome [2] выдаст ошибку. Чтобы избежать этого, вы можете сделать следующее:

 this.state.companiesIncome {amp}amp;{amp}amp; this.state.companiesIncome[2].value 

Таким образом, он будет напечатан, только если у вас есть действительное значение companiesIncome. Чтобы немного его улучшить, вы также можете написать:

 (this.state.companiesIncome {amp}amp;{amp}amp; this.state.companiesIncome.length {amp}gt;= 2) {amp}amp;{amp}amp; this.state.companiesIncome[2].value 

Если вы хотите подключить его только к консоли, сделайте следующее:

 console.log(this.state.companiesIncome ? this.state.companiesIncome[2].value : 'companiesIncome is null'); 

Дело в том, что React начинает рендеринг в самом начале. Вы можете посмотреть в JSFiddleExample , в консоли вы увидите рендер в начале, затем componentDidMount. Следовательно, вы должны добавить проверку. this.state.companiesIncome! == null this.state.companiesIncome! == null . Когда вы измените состояние в componentDidMount, рендеринг начнется снова с вашими данными. Вы можете прочитать о React Lifecycle в документации React