React setState 在更改图像时不会更新状态

Question

在产品详细信息页面中，我在轮播中获得了商品的大图片和几张小图片。如果它们被点击，我会尝试用小图片替换大图片。

    constructor() {
    super();
    this.state = {
        zoomProps: {
            width: 400,
            zoomWidth:500,
            scale:1.5,
            img:'assets/images/products/14.jpg',
            offset: {vertical: 0, horizontal: 10},
        }
    }
}

handleClick(i){
    this.setState({
        zoomProps:{
            img: i,
        }
    });
}

我正在使用这样的 zoomProps 状态，它工作正常；

<div  style={{display: 'flex', marginBottom: 10}}>
      <ReactImageZoom  {...this.state.zoomProps}  />
</div>

我正在尝试像这样设置状态 zoomProps img 的地址；

 <a className="horizontal-thumb active" onClick={this.handleClick.bind(null,`'assets/images/products/17.jpg'`)} >
 <img  className="img-responsive" width="85" alt="None" src="assets/images/products/5.jpg" data-echo="assets/images/products/17.jpg" />
</a>

但是它给了我这个错误；

    TypeError: Cannot read property 'setState' of nullhandleClick
C:/Users/kalen/WebstormProjects/emlakui/src/components/detail/detail_partials/content.js:20
  17 |    }
  18 | 
  19 |    handleClick(i){
> 20 |        this.setState({
  21 |            zoomProps:{
  22 |                img: i,
  23 |            }

如果 console.log(i) 在 handleClick 函数中，我看到它正在传递正确的数据，但由于某种原因 zoomProps 的 img 状态没有得到更新。谁能告诉我正确的方法吗？另一个问题：我是否必须使用 redux 并为其创建一些操作？

编辑：在另一篇文章中属性 'setState' 未定义的答案不包括

onClick={this.handleClick.bind(this,'assets/images/products/17.jpg')} 。我试图发送这样的数据，所以我认为这些是相似但不同的问题。

Answer 1

您将 handleClick 的 context 作为 null 传递，应该是 this ，表示对当前组件的引用。

改变这个：

this.handleClick.bind(null,`'assets/images/products/17.jpg'`)

至

this.handleClick.bind(this,'assets/images/products/17.jpg')

React setState 在更改图像时不会更新状态

React setState doesnt update state while changing an image

setstate

reactjs