이미지를 변경하는 동안 setState가 상태를 업데이트하지 않습니다.

제품 세부 정보 페이지에서 회전 목마 안에 항목과 그림이 약간 나타납니다. 클릭하면 큰 그림을 작은 그림으로 교체하려고합니다.이미지를 변경하는 동안 setState가 상태를 업데이트하지 않습니다.

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>

하지만이 오류가 발생합니다. 내가 올바른 데이터를 전달하지만 어떤 이유 zoomProps 'IMG 상태에 대한 것 참조 handleClick 기능에서을 console.log (i)는 업데이트되지 않는 경우

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 |   }

. 누구든지이 올바른 방법을 보여줄 수 있습니까? 또 다른 질문 : redux를 사용하고 이에 대한 몇 가지 조치를 취해야합니까?

편집 : 정의되지 않은 응답 나던의 다른 읽기 특성 'setState를'에서

의 onclick = {this.handleClick을 포함한다. 바인드 (this, 'assets/images/products/17.jpg')}. 나는 이런 식으로 데이터를 보내려고 노력했다.

출처

2017-11-02 Ibrahim Avci

당신은 this해야 null로 handleClick의 context, 전달하는, 현재의 구성 요소에 대한 심판을 의미한다.

변경이 :

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

내가 만약 내가 지금 this.handleClick.bind (이,`자산/이미지/제품/17.jpg'`) 및 변경

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

출처

2017-11-02 07:52:09

에 작은 그림을 클릭하면 큰 그림이 사라집니다. 나는 여기에도 다른 실수를하고 있다고 생각합니다. –

업데이트 된 답변을 확인하고 이미지 URL을 제거하십시오. –

이미지를 변경하는 동안 setState가 상태를 업데이트하지 않습니다.

답변

관련 문제