ReactJS谷歌地图组件赢得'；重排机

我正在编写一个web应用程序，它允许您输入一个地址，并呈现一张地图，上面有从给定地址到其他4个地址（目前为硬编码）的方向。一切正常，直到我想输入新地址并刷新地图

我正在使用tomchentw/react谷歌地图库获取方向并渲染地图

这是我的密码：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { compose, withProps, withPropsOnChange, withState, lifecycle } from     "recompose";
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker,
DirectionsRenderer,
} from "react-google-maps";

const MapWithADirectionsRenderer = compose(
withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `500px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
}),        
withScriptjs,
withGoogleMap,
lifecycle({
    componentDidMount() {
        this.setState({
            newDirections: [],
        });

        let destinations = ['Imperial College', '123 Aldersgate Street', '17 Moorgate', 'Spitafields Market']

        const DirectionsService = new google.maps.DirectionsService();

        DirectionsService.route({
            origin: this.props.origin,
            destination: destinations[0],
            travelMode: google.maps.TravelMode.TRANSIT,
        }, (result, status) => {
            if (status === google.maps.DirectionsStatus.OK) {
                this.setState({
                    directions: result,
                    newDirections: this.state.newDirections.concat([result])
                });
            } else {
                console.error(`error fetching directions ${result}`);
            }
        });

        DirectionsService.route({
            origin: this.props.origin,
            destination: destinations[1],
            travelMode: google.maps.TravelMode.TRANSIT,
        }, (result, status) => {
            if (status === google.maps.DirectionsStatus.OK) {
                this.setState({
                    directions1: result,
                    newDirections: this.state.newDirections.concat([result])
                });
            } else {
                console.error(`error fetching directions ${result}`);
            }
        });

        DirectionsService.route({
            origin: this.props.origin,
            destination: destinations[2],
            travelMode: google.maps.TravelMode.TRANSIT,
        }, (result, status) => {
            if (status === google.maps.DirectionsStatus.OK) {
                this.setState({
                    directions2: result,
                    newDirections: this.state.newDirections.concat([result])
                });
            } else {
                console.error(`error fetching directions ${result}`);
            }
        });

        DirectionsService.route({
            origin: this.props.origin,
            destination: destinations[3],
            travelMode: google.maps.TravelMode.TRANSIT,
        }, (result, status) => {
            if (status === google.maps.DirectionsStatus.OK) {
                this.setState({
                    directions3: result,
                    newDirections: this.state.newDirections.concat([result])
                });
            } else {
                console.error(`error fetching directions ${result}`);
            }
        });
    }      
})
)(props =>
<GoogleMap
    defaultZoom={7}
    defaultCenter={new google.maps.LatLng(51.435341, -0.131116)}
>
    {props.directions && <DirectionsRenderer directions={props.newDirections[0]} />}
    {props.directions1 && <DirectionsRenderer directions={props.newDirections[1]} />}
    {props.directions2 && <DirectionsRenderer directions={props.newDirections[2]} />}
    {props.directions3 && <DirectionsRenderer directions={props.newDirections[3]} />}

</GoogleMap>
);

class AddressForm extends React.Component {
constructor(props) {
    super(props);
    this.state = { value: '' };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(event) {
    this.setState({ value: event.target.value });
}

handleSubmit(event) {

    let targetAddress = this.state.value;
    ReactDOM.render(<MapWithADirectionsRenderer origin={targetAddress} destination='Imperial College' />, document.getElementById('mapplace'));
    event.preventDefault();

}

render() {
    return (
        <form onSubmit={this.handleSubmit}>
            <label>
                Address:
                <input type="text" value={this.state.value} onChange={this.handleChange} />
            </label>
            <input type="submit" value="submit" />
        </form>
    );
}
}

registerServiceWorker();


ReactDOM.render(<AddressForm />, document.getElementById('formplace'));

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
从“./registerServiceWorker”导入registerServiceWorker；
从“重新组合”导入{compose，withProps，withPropsOnChange，withState，lifecycle}；
进口{
用ScriptJS，
用谷歌地图，
谷歌地图，
标记，
方向，
}从“谷歌地图反应”；
const MapWithADirectionsRenderer=compose(
用道具({
谷歌地图网址：https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry，图纸，位置“，
加载元素：，
集装箱运输：，
mapElement:，
}),        
用ScriptJS，
用谷歌地图，
生命周期({
componentDidMount（）{
这是我的国家({
新方向：[]，
});
let destinations=[“帝国理工学院”、“奥尔德斯盖特街123号”、“穆尔盖特17号”、“斯皮塔菲尔德市场”]
const DirectionsService=new google.maps.DirectionsService（）；
方向服务.路线({
来源：this.props.origin，
目的地：目的地[0]，
travelMode:google.maps.travelMode.TRANSIT，
}，（结果、状态）=>{
if（status==google.maps.directionstatus.OK）{
这是我的国家({
方向：结果，
newDirections:this.state.newDirections.concat（[结果]）
});
}否则{
错误（`error fetching directions${result}`）；
}
});
方向服务.路线({
来源：this.props.origin，
目的地：目的地[1]，
travelMode:google.maps.travelMode.TRANSIT，
}，（结果、状态）=>{
if（status==google.maps.directionstatus.OK）{
这是我的国家({
方向1：结果，
newDirections:this.state.newDirections.concat（[结果]）
});
}否则{
错误（`error fetching directions${result}`）；
}
});
方向服务.路线({
来源：this.props.origin，
目的地：目的地[2]，
travelMode:google.maps.travelMode.TRANSIT，
}，（结果、状态）=>{
if（status==google.maps.directionstatus.OK）{
这是我的国家({
方向2：结果，
newDirections:this.state.newDirections.concat（[结果]）
});
}否则{
错误（`error fetching directions${result}`）；
}
});
方向服务.路线({
来源：this.props.origin，
目的地：目的地[3]，
travelMode:google.maps.travelMode.TRANSIT，
}，（结果、状态）=>{
if（status==google.maps.directionstatus.OK）{
这是我的国家({
方向3：结果，
newDirections:this.state.newDirections.concat（[结果]）
});
}否则{
错误（`error fetching directions${result}`）；
}
});
}      
})
)（道具=>
{props.directions&&}
{props.directions1&}
{props.directions2&&}
{props.directions3&&}
);
类AddressForm扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:''}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
handleSubmit（事件）{
让targetAddress=this.state.value；
ReactDOM.render（，document.getElementById（'mapplace'））；
event.preventDefault（）；
}
render（）{
返回(
地址:
);
}
}
registerServiceWorker（）；
ReactDOM.render（，document.getElementById（'formplace'））；

加载时，用户只看到渲染的组件。输入地址并提交表单后，地图将正确显示。但是，当我输入新地址并重新提交表单时，映射不会重新提交

---

是否缺少某些内容？

您可能正在查找在任何更新发生后运行的函数，

componentDidMount

在第一次渲染后只调用一次

我将提出以下修改清单：

a） 引入一个单独的函数来绘制管线：

 drawRoutes() {
        let destinations = ['Imperial College', '123 Aldersgate Street', '17 Moorgate', 'Spitafields Market']
        const DirectionsService = new google.maps.DirectionsService();
        DirectionsService.route({
            origin: this.props.origin,
            destination: destinations[0],
            travelMode: google.maps.TravelMode.TRANSIT,
        }, (result, status) => {
            if (status === google.maps.DirectionsStatus.OK) {
                this.setState({
                    directions: result,
                    newDirections: this.state.newDirections.concat([result])
                });
            } else {
                console.error(`error fetching directions ${result}`);
            }
        });

        DirectionsService.route({
            origin: this.props.origin,
            destination: destinations[1],
            travelMode: google.maps.TravelMode.TRANSIT,
        }, (result, status) => {
            if (status === google.maps.DirectionsStatus.OK) {
                this.setState({
                    directions1: result,
                    newDirections: this.state.newDirections.concat([result])
                });
            } else {
                console.error(`error fetching directions ${result}`);
            }
        });

        DirectionsService.route({
            origin: this.props.origin,
            destination: destinations[2],
            travelMode: google.maps.TravelMode.TRANSIT,
        }, (result, status) => {
            if (status === google.maps.DirectionsStatus.OK) {
                this.setState({
                    directions2: result,
                    newDirections: this.state.newDirections.concat([result])
                });
            } else {
                console.error(`error fetching directions ${result}`);
            }
        });

        DirectionsService.route({
            origin: this.props.origin,
            destination: destinations[3],
            travelMode: google.maps.TravelMode.TRANSIT,
        }, (result, status) => {
            if (status === google.maps.DirectionsStatus.OK) {
                this.setState({
                    directions3: result,
                    newDirections: this.state.newDirections.concat([result])
                });
            } else {
                console.error(`error fetching directions ${result}`);
            }
        });
    }

b） 设置初始状态：

  componentWillMount() {
       this.setState({
                newDirections: [],
       });
   }

c） 绘制路线：

componentDidMount() {
        this.drawRoutes();
}

d） 如果地址已更改，则重新绘制路由

componentDidUpdate(prevProps, prevState) {
     if (prevProps.origin !== this.props.origin) {
          this.setState({
              directions: null,
              directions1: null,
              directions2: null,
              directions3: null,
              newDirections: []
         });
         this.drawRoutes();
     }
}