Javascript React props：无法访问数组中的对象中的键，索引都是通过props传递的

我正在做一个React项目，在这个项目中，我试图访问一个对象中的一个键，该对象是使用索引的数组中的一个元素，但却没有定义

问题似乎是我得到了一组对象作为道具，索引也作为道具。当我试图使用props中的索引访问数组中对象的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);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“lodash”进口；
将*作为操作从“../../actions”导入；
类ImageBox扩展组件{
handleClick（）{
log（'handleClose:'）；
}
渲染（）{
console.log（this.props.imageIndex）；
//索引日志可以吗
console.log（this.props.images[0]）；
//在数组中显示正确的对象
log（this.props.images[this.props.imageIndex]）；
//再次显示数组中的正确对象
log（this.props.images[this.props.imageIndex].publicid）；
//TypeError:无法读取未定义的属性“publicid”
返回(
);
}
}
render（）{
返回(
{this.renderImages（）}
);
}
}
函数MapStateTops（状态）{
返回{
auth:state.auth，
成功消息：state.auth.success，
errorMessage:state.auth.error，
};
}
导出默认连接（MapStateTrops，actions）（ImageBox）；

let images=[{id:1，publicid:1234}，{id:2，publicid:5678}]；
设imageIndex=0；
控制台日志（图像）；
//[{id:1，publicid:“1234”}，{id:2，publicid:“5678”}]
console.log（imageIndex）
// 0
console.log（图像[0].publicid）
// 1234
console.log（图像[imageIndex]）
//{id:1，publicid:“1234”}
console.log（图像[imageIndex].publicid）
//无法读取未定义的属性“publicid”

请有条件地尝试渲染，因为它在渲染中被调用，这可能是因为props的初始值没有此值

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>
      );
    }
  }

renderImages（）{
console.log（this.props.imageIndex）；
//索引日志可以吗
console.log（this.props.images[0]）；
//在数组中显示正确的对象
log（this.props.images[this.props.imageIndex]）；
//再次显示数组中的正确对象
if（this.props.images[this.props.imageIndex]）
log（this.props.images[this.props.imageIndex].publicid）；
//TypeError:无法读取未定义的属性“publicid”
返回(
);
}
}

您可能想发布更多的React代码，因为假设道具在您阅读时还可以，那么您发布的内容没有问题。您确定

控制台.log

是一个接一个的，并且它们之间没有任何其他代码吗？我同意这应该很简单，这就是为什么我对此感到困惑的原因。我不得不认为这是React道具中的一些怪癖。我给出了组件的代码。这很简单，因为我刚刚开始通过确保道具顺利通过来构建它。但事实并非如此。不幸的是，我无法共享整个代码库。组件的完整代码在上面。有些道具不能直接访问道具数组对象，而道具索引…是有效的。检查是否存在this.props.imageIndex，并且它正常工作。不知何故，当它没有值时，它是一个空对象，所以如果为空，则检查它。