React-google-maps重新呈现问题
发布时间:2020-12-15 09:35:12 所属栏目:百科 来源:网络整理
导读:我在react-google-maps npm模块中遇到了一些问题. 首先渲染,就像一个魅力. 重新渲染地图组件时,我得到了经典的谷歌地图错误. Uncaught TypeError: Cannot read property 'offsetWidth' of nullUncaught (in promise) TypeError: Cannot read property 'compo
我在react-google-maps npm模块中遇到了一些问题.
首先渲染,就像一个魅力. Uncaught TypeError: Cannot read property 'offsetWidth' of null Uncaught (in promise) TypeError: Cannot read property 'componentWillReceiveProps' of null(…) 因为渲染时地图对象不可用?
import React,{ PropTypes } from 'react' import { GoogleMap,Marker,GoogleMapLoader } from 'react-google-maps' export class Map extends React.Component { static propTypes = { coordinates: PropTypes.object,markers: PropTypes.array }; render () { return (<section onloadstyle={{height: '300px'}}> <GoogleMapLoader containerElement={ <div {...this.props} style={{ height: '300px',width: '100%' }} /> } googleMapElement={ <GoogleMap ref={(map) => console.log(map)} defaultZoom={15} defaultCenter={this.props.coordinates}> {this.props.markers.map((marker,index) => { return ( <Marker key={index} {...marker} /> ) })} </GoogleMap> } /> </section>) } } export default Map 我使用这样的组件: var coordinates = {lat: this.props.item.delivery_address_lat,lng: this.props.item.delivery_address_lng} var map = this.props.item.delivery_address_lat !== 0 && this.props.item.delivery_address_lng !== 0 ? (<Row id='map'> <Map markers={[{position: coordinates}]} coordinates={coordinates} /> </Row>) : '' 这是因为google-maps-react模块没有正确卸载组件,还是我做过的事情? 以下是内幕 <script src="https://maps.googleapis.com/maps/api/js?key=MY-KEY"></script>
试图以非react-redux方式解决它,这绝不是解决方案,因为它产生错误消息:只能更新已安装或安装的组件.这通常意味着您在已卸载的组件上调用了setState().这是一个无操作.请检查Map组件的代码. 但是,地图仍然正确地重新渲染.我试着用redux方式调用传递的prop函数&在状态中设置{map:section}并将其从调用视图中传递下来.没有解决问题并导致相同的错误消息,即使它被setTimeout延迟 我有点卡在这里,不知道如何解决这个问题. componentDidMount () { this.setState({map: null}) setTimeout(() => this.setState({ map: <section onloadstyle={{height: '300px'}}> <GoogleMapLoader containerElement={ <div {...this.props} style={{ height: '300px',index) => { return ( <Marker key={index} {...marker} /> ) })} </GoogleMap> } /> </section> }),300) } render () { if (!this.state) { return <span /> } else { return this.state.map } } 解决方法
第二次编辑的解决方案是清除componentWillUnmount()函数中的setTimeout()调用.
你总是需要清除间隔和组件卸载时超时. componentDidMount () { this.setState({map: null}) this.timeout = setTimeout(() => this.setState({ map: <section onloadstyle={{height: '300px'}}> <GoogleMapLoader containerElement={ <div {...this.props} style={{ height: '300px',300) } componentWillUnmount () { clearTimeout(this.timeout) } render () { if (!this.state) { return <span /> } else { return this.state.map } } 该解决方案不是一个好的解决方案,并且不符合react-redux工作流程.但它的确有效. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |