ReactJs - я не могу поймать переменную вне цикла axios

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

class Houses extends Component {
  constructor(props) {
    super(props);
    this.state = {
      index:0,         
      currentHouse:[]      
    };      
  }

  componentDidMount() { 
    axios.get(URL_HOUSES)
      .then(res => {        
        /* Combine into single setState call (this is optional, but 
           makes for cleaner code. Note that calling setState will
           trigger the component to render() again, which will cause
           your currentHouse[0].name to be rendered into <h3> below  */
        this.setState({ index:0, currentHouse: res.data })
    }

  render() {                  

    /* Detect if currentHouse data is ready/avalible - if not, render
       a temporary loading message */
    if (this.state.currentHouse.length === 0) {
       return <p>Loading</p>
    } 

    /* If we reach this point, then there is data in this.state.currentHouse
       that can be accessed and rendered */
    return (
      <div>         
        <h3>{this.state.currentHouse[this.state.index].name}</h3>
      </div>
    );
  }
}   


export default Houses

TL;DR проверьте исходный массив currentHouse перед его отображением в методе рендеринга.

При первоначальном рендеринге вашего компонента в массиве currentHouse нет элементов.

Итак, когда ваш компонент пытается распечатать ваше выражение this.state.currentHouse[this.state.index].name, на самом деле он пытается найти 0-ю позицию пустого массива []. Это будет оцениваться какundefined.

Вариант исправить это — установить начальное значение для массива currentHouse в состоянии или проверить, есть ли значения в массиве. Например:

 <h3>{this.state.currentHouse.length && this.state.currentHouse[this.state.index].name}</h3>