我有3个组成部分:App,Map和ListPlaces。在ListPlaces组件中,当用户在输入元素中键入内容时,我想更改App.js中的状态(标记的状态)以仅在地图上显示相关标记。
编辑: :编辑错字时,错误消失了。但是,我认为逻辑仍然是错误的。因为当我在输入元素中写入内容时,markers数组将立即为0。当然,所有标记都将消失。
更多说明:
componentDidMount之后,我的 markers 数组包含7个项目。并且Map组件使用此markers数组并在地图上呈现标记。但是,我需要根据输入元素的值从ListPlaces组件控制我的标记。所以我把这个:onChange={e => {this.updateQuery(e.target.value); changeMarkersHandler(e.target.value)}}
放在输入元素的onChange属性中。 (忽略this.updateQuery,目前,您可以仅关注changeMarkersHandler 。)
此changeMarkersHandler在App.js中运行changeMarkers函数,但我不知道为什么在changeMarkers函数运行时我的标记数组立即变为0。
注意:我正在使用react-google-maps,并且省略了一些与问题无关的代码块。
App.js
class App extends Component {
constructor(props) {
super(props);
this.state = {
places: [],
markers: [],
markerID: -1,
newMarkers: []
};
this.changeMarkers = this.changeMarkers.bind(this);
}
componentDidMount() {
fetch("api_url")
.then(response => response.json())
.then(data => {
this.setState({
places: data.response.venues,
markers: data.response.venues
});
})
.catch(error => {
console.log("Someting went wrong ", error);
});
}
changeMarkers(value) {
const newMarkers = this.state.markers.filter(
place => place.name === value
);
this.setState({
newMarkers : newMarkers,
markers: newMarkers
})
}
render() {
return (
<div className="App">
<Map role="application"
places={this.state.places}
markers={this.state.markers}
openInfoHandler={this.openInfo}
closeInfoHandler={this.closeInfo}
markerID={this.state.markerID}
googleMapURL="url_here" />
<ListPlaces changeMarkersHandler={this.changeMarkers} />
</div>
);
}
}
ListPlaces.js
import React, { Component } from "react";
import escapeRegExp from "escape-string-regexp";
class ListPlaces extends Component {
state = {
searchQuery: ""
};
updateQuery = query => {
this.setState({ searchQuery: query});
};
render() {
const { toggleListHandler, locations, openInfoHandler, changeMarkersHandler} = this.props;
let showLocations;
if (this.state.searchQuery) {
const match = new RegExp(escapeRegExp(this.state.searchQuery), "i");
showLocations = locations.filter(location =>match.test(location.name));
} else {
showLocations = locations;
}
return (
<div>
<aside>
<h2>Restaurants</h2>
<nav>
<div className="search-area">
<input
className="search-input"
type="text"
placeholder="Search Restaurant"
value={this.state.searchQuery}
onChange={e => {this.updateQuery(e.target.value); changeMarkersHandler(e.target.value)}}
/>
</div>
<ul>
{showLocations.map(location => {
return (
<li
key={location.id}
onClick={e =>
openInfoHandler(e, location.id)
}
>
{location.name}
</li>
);
})}
</ul>
</nav>
<p>some text</p>
</aside>
<a
onClick={toggleListHandler}
id="nav-toggle"
className="position"
>
<span />
</a>
</div>
);
}
}
export default ListPlaces;
答案 0 :(得分:2)
构造函数中有错字。
this.changeMarkers(this.changeMarkers.bind(this));
应该是
this.changeMarkers = this.changeMarkers.bind(this);