“反应式Google地图”中的折线

Question

我有“ MyMapComponent”。在标记组件上的事件“ onDragEnd”之后，我需要更新/渲染折线。 props.state.places包含有效数据。 我尝试使用循环，但是这是错误的，无法正常工作。

完整代码：https://github.com/TravisJr/React_G_Maps/blob/master/my-app/src/components/RouteEditorComponent.js

'react-google-maps' 'react-places-autocomplete'

const MyMapComponent = (



withGoogleMap((props) =>
    <GoogleMap
        defaultZoom={7}
        defaultCenter={props.state.places[props.state.places.length -1]}
    >

        {props.state.items.map((value, index) => (
            <Marker
                position={{lat: props.state.places[index].lat, lng: props.state.places[index].lng}}
                draggable={true}
                key={'M'+index}
                ref={(ref => {if (props.state.ref[index] === undefined) props.state.ref.push(ref);
                                else props.state.ref[index] = ref;
                })}

                onDragEnd={() => {
                    let pos = props.state.ref[index].getPosition();
                    props.onDragEndMarker(pos.lat(), pos.lng(), index);
                }}

            />
        ))}


        <Polyline
            path={props.state.places}
            key={'0'}
            geodesic={true}
            options={{strokeColor: "#ff2527", strokeOpacity: 0.75, strokeWeight: 2,}}
            ref={(ref => {props.state.polyline = ref; console.log(ref)})}
        />
    </GoogleMap>


));