캔버스 객체를 사용하여 반응 구성 요소의 상태를 업데이트 할 수 없습니다.

Question

사용자가 마우스를 해당 영역 위로 올리면 강조 표시 할 영역이 몇 개 있습니다. 문제에 대한 나의 접근 방식은 캔버스 요소를 사용하여 영역 주위에 대략적인 다각형을 그리는 것이며, 일부 MIT 코드를 사용하면 사용자가 마우스를 다각형 내부에 가지고 있는지 여부를 감지 할 수 있습니다. 그러면 이미지가 강조되고 레이블이 지정된 영역을 표시하는 해당 그래픽으로 전환됩니다.

모든 것이 괜찮은 것처럼 보였지만 상태를 변경하려고하면 폭탄이 나옵니다. 나는 그것이 어딘가에 vitual dom과 관련이 있다고 생각하고 있습니다.

는 다음 구성 요소

here is a fairly minimal reproduction running on codesandbox

구성 요소가 캔버스 심판이 null하게 업데이트 할 때 내가 생산에서 실행

class HomeMap extends Component { 
    constructor(props) { 
     super(props); 
     this.onMouseMove = this.onMouseMove.bind(this); 
     this.state = { 
      placeName: 'default', 
     }; 
    } 

    onMouseMove(canvas, eX, eY) { 
     const { top, left } = canvas.getBoundingClientRect(); 
     const [x, y] = [eX - left, eY - top]; 
     const mouseOver = mapImages.map(image => ({ 
      ...image, 
      isInside: inside([x, y], image.polygon), 
     })) 
      .filter(({ isInside }) => isInside); 

     const stateChange = { 
      placeName: mouseOver.length === 0 
       ? 'default' 
       : mouseOver[0].name, 
     }; 
     console.log(stateChange); 
     this.setState(stateChange); 
    } 

    componentDidMount() { 
     this.ctx.drawImage(getImage('default').image, 0, 0, 656, 327); 
    } 

    componentDidUpdate() { 
     console.log(getImage('default')) 
     console.log(this.state); 
     this.ctx.drawImage(getImage(this.state.placeName).image, 0, 0, 656, 327); 
    } 

    render() { 
     return (
      <div> 
       <canvas 
        onMouseMove={(e) => { this.onMouseMove(this.canvas, e.clientX, e.clientY); } } 
        width={626} 
        height={327} 
        ref={(ref) => { 
         this.ctx = ref.getContext('2d'); 
         this.canvas = ref; 
        } } 
       /> 
      </div> 
     ); 
    } 
}; 

, 나는 그 오류를 throw 것입니다 생각합니다.

Answer 1

문제의 원인을 찾았습니다 : 2d 컨텍스트 캐싱.

<canvas 
    onMouseMove={(e) => { this.onMouseMove(this.canvas, e.clientX, e.clientY); } } 
    width={626} 
    height={327} 
    ref={(ref) => { 
     this.ctx = ref.getContext('2d'); // <=== remove this 
     this.canvas = ref; 
    } } 
/> 

그래서 오히려는 getContext에 대한 참조를 저장하는 것보다, 그냥 캔버스 요소를 캐시 나는 그리기 기능에 액세스하는 데 필요한 때 canvas.getContext('2d')했다.