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>

我正在尝试像这样 setState 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 |            }

如果我看到 handleClick 函数中的 console.log(i) 传递了正确的数据，但由于某种原因 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')