React:定义常量？

Question

我有一个容器组件,它一次为一个图像组件提供一个图像(每次用户单击一个按钮).我想在常量(数组)中定义这些图像路径.但是TypeError: Cannot read property '1' of undefined当我尝试从那个数组中读取时我得到了.

我该如何解决这个错误,这是最好的方法吗？

export default class ImageContainer extends Component {
  constructor(props){
    super(props)
    this.state = {
      currentImage: '/images/dummy-image-1.jpg'
    }

    this.changeImage = this.changeImage.bind(this)

    const images = [
      '/images/dummy-image-1.jpg',
      '/images/dummy-image-2.jpg',
      '/images/dummy-image-3.jpg',
      '/images/dummy-image-4.jpg',
      '/images/dummy-image-5.jpg'
    ]
  }

  changeImage(event){
    console.log(this.images[1])
    //Do something
  }

  render(){
    return(
      <ImageView image={this.state.currentImage} changeImage={this.changeImage} />
    )
  }
}

Answer 1

您需要images在构造函数中定义为object属性:

this.images = [
  '/images/dummy-image-1.jpg',
  ...
];

当你声明的变量(使用var,let,const)它只是在功能上是可见的(在你的情况下,构造函数)的范围.

Answer 2

您可以将 const 定义移到类之外：

const images = [
  '/images/dummy-image-1.jpg',
  '/images/dummy-image-2.jpg',
  '/images/dummy-image-3.jpg',
  '/images/dummy-image-4.jpg',
  '/images/dummy-image-5.jpg'
];

export default class ImageContainer extends Component {
    //...
}

这种方式images仍然是一个const并且它仍然只对文件中的代码可见（我假设它只是ImageContainer类）。