Как исправить обновление состояния?

Question

[Евгений Кучеренко]

UPD: проблема была в том, this.state.store.delete(element) не возвращал state. Сначала должна происходить обработка store, а уже затем записываться новое состояние в setState

Я рисую сетку N x N. Представим, что сетка - это аналогичный массив N x N. Мне надо получить индекс её элемента при нажатии, который, в свою очередь, запишется в store.
То есть я получаю координаты ( x , y ) относительно холста и перевожу их в индекс элемента. Store представляет собой ассоциативный массив. Условие записи: если элемента нет, то записываю его, если есть, то стираю.
Мало того, что тот индекс, который мне нужен записывается как правило со второго раза, после стирания индекса консоль выдает ошибку TypeError: this.state.store.has is not a function. (In 'this.state.store.has(element)', 'this.state.store.has' is undefined)
Как исправить?

export default class SimulationField extends React.Component {
    
    constructor(props) {
        super(props);
        
        this.state = {
            store: new Map(),
            scale: 20,
            edge: this.props.edge,
            element: 0
        }
    }
    
    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>
        );
    }
}

Answer 1

[Aves]

Ну так и сделать сначала обработку, а потом установку.

const {store} = this.state;

if (store.has(element)) store.delete(element);
else store.set(element, true);

this.setState({store});