Question

我画了一个网格 N×N 。假设网格是 N x N 的数组。当我点击元素并将其放入商店时，我需要获取数组的索引。

也就是说，我得到相对于画布的坐标（x，y），并将它们转换为索引。商店是一个关联数组。录音条件：如果商店没有索引我把它，如果没有我删除它。

索引，我需要第二次写入并在删除控制台后发出错误

TypeError索引：this.state.store.has不是函数。（'this.state.store.has（member）'，'this.state.store.has'未定义）

如何解决？

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

Answer 1

差不多，但.delete不会像.set那样返回store。

如果Map对象中的元素已存在且已被删除，则返回true;如果元素不存在，则返回false。

这意味着，如果this.state.store.has(element)为真，那么您实际上只是在做：

this.setState({ 
  store: true
})

下次尝试拨打store.has时，您实际上只是试图拨打true.has，但这不起作用。

试试这个。

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

this.setState({ store })

如何修复状态更新？

1 个答案: