상태 업데이트를 수정하는 방법은 무엇입니까?

Question

그리드를 그립니다. N × N. 그리드가 N x N의 배열이라고 가정합니다. 요소를 클릭 할 때 배열에 넣을 때 배열의 인덱스를 가져와야합니다.

즉 캔버스를 기준으로 (x, y) 좌표를 가져 와서이를 색인으로 변환합니다. 저장소는 연관 배열입니다. 기록 조건 : 상점에 색인이 없으면 넣고, 없으면 삭제합니다.

나는 원칙적으로 콘솔을 삭제 한 후 두 번째로 작성해야 인덱스는 오류를

형식 오류 색인을 제공 : this.state.store.has은하지 않는 기능입니다. ('this.state.store.has (member)', 'this.state.store.has'가 정의되지 않았습니다.)

문제를 해결하는 방법은 무엇입니까?

Answer 1

export default class SimulationField extends React.Component { 
 
    
 
    constructor(props) { 
 
     super(props); 
 
     
 
     this.state = { 
 
      store: new Map(), 
 
      scale: 20, 
 
      edge: this.props.edge 
 
     } 
 
    } 
 
    
 
    handleClick(e) { 
 
     
 
     let x = Math.floor(getMouseX(e, this.refs.canvas) * this.state.scale/this.state.edge) 
 
     let y = Math.floor(getMouseY(e, this.refs.canvas) * this.state.scale/this.state.edge) 
 
     
 
     let element = xy2Key(this.state.scale)([x, y]) 
 
     
 
     this.setState({ 
 
      store: (this.state.store.has(element)) 
 
         ? this.state.store.delete(element) 
 
         : this.state.store.set(element, true) 
 
     }) 
 
    } 
 
    
 
    componentDidMount() { 
 
     this.updateCanvas(); 
 
    } 
 
    
 
    updateCanvas() { 
 
     const ctx = this.refs.canvas.getContext('2d'); 
 
     renderGrid({ ctx, edge: this.state.edge, scale: this.state.scale }) 
 
    } 
 
    
 
    render() { 
 
     return (
 
      <div> 
 
       <canvas 
 
        ref="canvas" 
 
        width={this.state.edge} 
 
        height={this.state.edge} 
 
        onClick={this.handleClick.bind(this)}> 
 
       </canvas> 
 
      </div> 
 
     ); 
 
    } 
 
}

은 거의하지만 .delete .set 같은 store가하는 반환하지 않습니다.

반환 true를 요소가 존재하지 않는 경우 Map 객체의 요소가 존재하고 제거 된, 또는 false합니다.

이

은 this.state.store.has(element) 지금까지에 해당하는 경우, 당신은 효과적으로 불과하고 있다는 것을 의미 : 당신이 시도하고 store.has 전화

this.setState({ 
    store: true 
}) 

다음 번에 당신이 실제로 그냥 작동하지 않습니다 true.has를 호출하려고합니다.

대신 사용해보십시오.

if (this.state.store.has(element)) { 
    this.state.store.delete(element) 
} else { 
    this.state.store.set(element, true) 
} 

this.setState({ store })