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>

我正试着像这样设置state 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

您传递的context handleClick为null，this应为this.handleClick.bind(null,`'assets/images/products/17.jpg'`)，表示参考当前组件。

改变这个：

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

到

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

1 个答案: