通过搜索过滤器更新反应谷歌标记

Question

>我有一个标记列表和一个受控组件中的输入字段，用于搜索列表中的特定查询。然后我有一个地图组件，它是标记列表组件的同级。当我在输入中搜索特定文本时，标记列表会更新，但地图不会使用标记列表中的标记进行更新。

import React, { Component } from 'react'
import escapeRegExp from 'escape-string-regexp'
import sortBy from 'sort-by'
class MarkerList extends Component {
state = {
query: ''
}
//input onChange handler
updateQuery = (query) => {
this.setState({ query: query.trim() })
}
render() {
const { listIsOpen,
toggleList,
venues,
handleListItemClick,
} = this.props
let venuesHasValue = false
let markers = []
//check whether venues array is valid
if(venues !== undefined && venues.length > 0 && venues!== null) {
venuesHasValue = true
}
//if venues array is not empty then loop through and return only 
//data that is needed
if (venuesHasValue) {
let marker = {}
venues.map(venue => {
marker = {
lat: venue.location.lat,
lng: venue.location.lng,
title: venue.name,
venueId: venue.id,
streetNumber: venue.location.formattedAddress[0],
postCode: venue.location.formattedAddress[3],
}
markers.push(marker)
})
}
let showingMarkers 
if (this.state.query) {
const match = new RegExp(escapeRegExp(this.state.query), 'i')
showingMarkers = markers.filter((marker) => match.test(marker.title))
} else {
showingMarkers = markers
}
//sort list alphabetically
showingMarkers.sort(sortBy('title'))
return (
<div>
{listIsOpen ? (
<div className='marker-list-open'>
<label htmlFor='search'>Search</label>
<input 
id='search'
type='text' 
placeholder='search for burger or pizza'
aria-required='true'
className='list-filter'
value={this.state.query}
onChange={(e) => this.updateQuery(e.target.value)}
/>
<div className='marker-list-container'>
<ul className='venue-list'>
{showingMarkers.map((marker, index) => {
return (
<li 
tabIndex='0'
key={index} 
placeholder={'search for burger or pizza'}
onClick={() => handleListItemClick(marker.venueId, marker)}
>{marker.title}</li>
)  
})}
</ul>
<div className='list-toggle-close'>
<img className='toggle-icon' src={require('../images/menu.svg')} alt='list closer' onClick={toggleList} />
</div>
</div>
</div> 
) : (
<div className='marker-list-closed'>
<div className='list-toggle-open'>
<img className='toggle-icon' src={require('../images/menu.svg')} alt='list opener' 
onClick={toggleList} />
</div>
</div>
)}
</div> 
)
}
}
export default MarkerList

如何将过滤后的标记showingMarkers传递到映射容器组件，以便它相应地更新？

Answer 1

您应该在映射组件的状态中维护标记。然后，您可以将处理程序作为 Map 组件的道具传递给 MarkerList。showingMarker更新后，您应该setState带有更新标记列表的地图组件，如下所示：

<MarkerList
markersHandler={this.onMarkerUpdate}
/>

onMarkerUpdate 将更新地图组件的状态：

onMarkerUpdate = (markers) => {
this.setState({
markers
});
}

在markerList中，您可以在处理程序中传递更新的标记列表，这将更新您的地图组件状态：

this.props.markerHandler(showingaMarkers);

最后，在映射组件中，您可以从状态渲染标记：

render(){
const { markers } = this.state;
return (
<GoogleMap
//google map props
>
markers.map((marker,i)=>{
<Marker
key={i}
// your marker props
/>
});
)
}
</GoogleMap>

PS，如果你能给你看地图组件。这将更容易帮助您。您可以在代码沙盒上共享。