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定义为对象属性：

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类）。

React：定义常量？

2 个答案: