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

Question

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

Кажется, проблема в том, что я получаю массив объектов в виде реквизитов и индекс в виде реквизитов.Когда я пытаюсь получить доступ к id или publicid объектов в массиве, используя индекс из реквизита, я получаю сообщение об ошибке.Ниже приведена упрощенная версия того, что я получаю.

Почему это происходит и как я могу решить эту проблему?

console.log(this.props.images);
// [{id: 1, publicid: "1234" }, {id: 2, publicid: "5678"}]

console.log(this.props.imageIndex)
// 0

console.log(this.props.images[0].publicid)
// 1234

console.log(this.props.images[this.props.imageIndex])
// {id: 1, publicid: "1234" }

console.log(this.props.images[this.props.imageIndex].publicid)
// Cannot read property 'publicid' of undefined

** Обновлено с дополнительным кодом **

import React, { Component } from 'react';
import { connect } from 'react-redux';
import _ from 'lodash';

import * as actions from '../../actions';

class ImageBox extends Component {

  handleClick() {
    console.log('handleClose:');
  }

  renderImages() {
      console.log(this.props.imageIndex);
      // index logs okay
      console.log(this.props.images[0]);
      // shows correct object in the array
      console.log(this.props.images[this.props.imageIndex]);
      // again shows correct object in array
      console.log(this.props.images[this.props.imageIndex].publicid);
      // TypeError: Cannot read property 'publicid' of undefined

      return (
        <div onClick={this.handleClick.bind(this)}>
          <div className="image-box-content">
          </div>
        </div>
      );
    }
  }

  render() {
    return (
      <div>
        {this.renderImages()}
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    auth: state.auth,
    successMessage: state.auth.success,
    errorMessage: state.auth.error,
  };
}


export default connect(mapStateToProps, actions)(ImageBox);

Answer 1

Попробуйте сделать рендеринг условно, так как он вызывается внутри рендера, это может быть из-за того, что начальное значение реквизита не имеет этого значения.

renderImages() {
      console.log(this.props.imageIndex);
      // index logs okay
      console.log(this.props.images[0]);
      // shows correct object in the array
      console.log(this.props.images[this.props.imageIndex]);
      // again shows correct object in array
      if(this.props.images[this.props.imageIndex])
      console.log(this.props.images[this.props.imageIndex].publicid);
      // TypeError: Cannot read property 'publicid' of undefined

      return (
        <div onClick={this.handleClick.bind(this)}>
          <div className="image-box-content">
          </div>
        </div>
      );
    }
  }

Answer 2

let images = [{id: 1, publicid: "1234" }, {id: 2, publicid: "5678"}];
let imageIndex = 0;

console.log(images);
// [{id: 1, publicid: "1234" }, {id: 2, publicid: "5678"}]

console.log(imageIndex)
// 0

console.log(images[0].publicid)
// 1234

console.log(images[imageIndex])
// {id: 1, publicid: "1234" }

console.log(images[imageIndex].publicid)
// Cannot read property 'publicid' of undefined

Я удалил только this.props из вашего кода, чтобы доказать, что ваш код работает нормально.Между вашими console.log должен быть какой-то другой код, и, возможно, вам придется поделиться с ними большим количеством