按数组在地图上绘制圆组件 foreach 显示错误

Question

我有一些应该显示在传单地图上的圆圈位置数组。我正在使用 react-leaflet 并且在屏幕上绘制了圆圈，但在控制台上出现错误。

Warning: Failed prop type: Invalid prop center supplied to Circle.

这是代码，我正在显示这个圆圈。

render() {
    return (
        <div className={'SeatsLayer'}>
            <Circle center={[0, 0]} radius={7} color={"red"} />
            {
                this.seats.map(seat => {
                    return (
                        <Circle key={seat['id']} center={[seat['x'], seat['y']]} radius={7} color={"red"} />
                    );
                })
            }
        </div>
    )
}

我必须补充一点，如果我在没有 foreach 的情况下显示圆圈，则没有错误。

render() {
    return (
        <div className={'SeatsLayer'}>
            <Circle center={[0, 0]} radius={7} color={"red"} />
        </div>
    )
}

此外，此逻辑在本机传单上正常工作。

Answer 1

由于某些原因，x 和 y 是字符串，Circle 组件可以正常显示，但在控制台上仍然显示错误。

render() {
    return (
        <div className={'SeatsLayer'}>
            {
                this.seats.map(seat => {
                    let x = parseInt(seat['x']);
                    let y = parseInt(seat['y']);
                    return (
                        <Circle key={seat['id']} center={[x, y]} radius={7} color={"red"} />
                    );
                })
            }
        </div>
    )
}

按数组在地图上绘制圆组件 foreach 显示错误

Draw Circle components on map by array foreach show error

javascript

arrays

react-leaflet