在我的反应应用程序中，用户输入关键字并获得结果列表。我正在尝试对这些结果实施过滤器。下面是过滤器的截图。
这是我的状态
class SearchResultsPage extends React.Component{
constructor(props) {
super(props);
this.state = {
results: this.props.location.state.data.results,
keyword: this.props.location.state.data.keyword,
pageOfItems: [],
cities: {
'New York City (NYC)': false,
'Delhi': false,
'Bangkok': false,
'Paris': false,
'Mexico City': false
},
topics: {
'Environment': false,
'Crime': false,
'Politics': false,
'Social Unrest': false,
'Infrastructure': false
},
languages: {
'Hindi': false,
'English': false,
'Thai': false,
'French': false,
'Spanish': false
}
};
this.onChangePage = this.onChangePage.bind(this);
this.onCityChange = this.onCityChange.bind(this);
}我要做的是，每当检查复选框或未选中复选框时，我都将相应的复选框设置为True/False。基于每个复选框的这个布尔值，我过滤掉results然后在 UI 上呈现它。单击复选框时，我可以过滤结果，但未选中复选框时，我无法显示所有结果。这就是我在复选框更改时的处理方式。
onCityChange(e) {
const val = e.target.checked;
const name = e.target.name;
let updatedCities = Object.assign({},this.state.cities,{[name]: val});
this.setState({
cities: updatedCities,
},function () {
const filteredCities = [];
for (let key in this.state.cities) {
if (this.state.cities[key] === true) {
filteredCities.push(key)
}
}
const filteredResults = [];
this.state.results.forEach((result) => {
for (let i = 0; i < filteredCities.length; i++) {
if (result.city === filteredCities[i] && result.city != null) {
filteredResults.push(result)
}
}
})
console.log(filteredResults.length)
if (filteredResults.length > 0) {
this.setState({
results: filteredResults
})
}
})
}我知道我没有正确处理状态，在这种情况下我该怎么办。为了更好地参考，这里是完整的搜索结果代码。
import React from 'react';
import NavigationBar from './NavigationBar';
import SearchPageResultsStyle from "../assets/css/SearchResultsPage.css"
import Pagination from './Pagination';
class SearchResultsPage extends React.Component{
constructor(props) {
super(props);
this.state = {
results: this.props.location.state.data.results,
keyword: this.props.location.state.data.keyword,
pageOfItems: [],
cities: {
'New York City (NYC)': false,
'Delhi': false,
'Bangkok': false,
'Paris': false,
'Mexico City': false
},
topics: {
'Environment': false,
'Crime': false,
'Politics': false,
'Social Unrest': false,
'Infrastructure': false
},
languages: {
'Hindi': false,
'English': false,
'Thai': false,
'French': false,
'Spanish': false
}
};
this.onChangePage = this.onChangePage.bind(this);
this.onCityChange = this.onCityChange.bind(this);
}
onChangePage(pageOfItems) {
// update local state with new page of items
this.setState({pageOfItems});
}
// setting each city in cities object (city chechboxes which are clicked on UI) to true
onCityChange(e) {
const val = e.target.checked;
const name = e.target.name;
let updatedCities = Object.assign({},this.state.cities,{[name]: val});
this.setState({
cities: updatedCities,
},function () {
const filteredCities = [];
for (let key in this.state.cities) {
if (this.state.cities[key] === true) {
filteredCities.push(key)
}
}
const filteredResults = [];
this.state.results.forEach((result) => {
for (let i = 0; i < filteredCities.length; i++) {
if (result.city === filteredCities[i] && result.city != null) {
filteredResults.push(result)
}
}
})
console.log(filteredResults.length)
if (filteredResults.length > 0) {
this.setState({
results: filteredResults
})
}
})
}
// rendering checkboxes for topics
renderCityFilter() {
const cities = ['New York City (NYC)','Delhi','Bangkok','Paris','Mexico City']
return cities.map((city,i) => {
return (
<div key={i} className={'city-filters'}>
<input
type="checkbox"
name={city}
onChange={this.onCityChange}
value={this.state.cities[city]}/>
<label key={i} style={{fontSize:12}}>
{city}
</label>
</div>
)
})
}
// rendering checkboxes for topics
renderTopicFilter() {
const topics = ['Environment','Crime','Politics','Social Unrest','Infrastructure']
return topics.map((topic,i) => {
return (
<div key={i}>
<input
type="checkbox"
name={topic}
onChange={this.onCityChange}
value={this.state.topics[topic]}/>
<label key={i} style={{fontSize:12}}>
{topic}
</label>
</div>
)
})
}
// rendering checkboxes for languages
renderLanguageFilter() {
const languages = ['Hindi','English','Thai','French','Spanish']
return languages.map((language,i) => {
return (
<div key={i}>
<input
type="checkbox"
name={language}
onChange={this.onCityChange}
value={this.state.languages[language]}/>
<label key={i} style={{fontSize:12}}>
{language}
</label>
</div>
)
})
}
render() {
const renderItems = this.state.pageOfItems.map((item, index) => {
return (
<div key={index}>
<h3 style={{color: '#1a0dab'}} key={index}>{item.text}</h3>
<a href={'https://google.com'} key={index}>{item.tweetUrl}</a>
<br/>
<p><span style={{fontWeight:'bold', textColor:'#6a6a6a'}} key={index}>topic: </span>{item.topic}</p>
<p><span style={{fontWeight:'bold', textColor:'#6a6a6a'}} key={index}>city: </span>{item.city}</p>
<p><span style={{fontWeight:'bold', textColor:'#6a6a6a'}} key={index}>lang: </span>{item.lang}</p>
<p><span style={{fontWeight:'bold', textColor:'#6a6a6a'}} key={index}>Hashtags: </span></p>
<hr/>
</div>
)
});
return (
<div>
<NavigationBar/>
<h4 style={{textAlign:'center', color:'#1a0dab'}}>Showing search results for <span style={{fontWeight:'bold', fontStyle:'Italic'}}>'{this.state.keyword}'</span></h4>
<hr/>
<div className={'wrap'} style={SearchPageResultsStyle}>
<div className={'fleft'}>
<h4>City</h4>
{this.renderCityFilter()}
<hr/>
<h4>Topics</h4>
{this.renderTopicFilter()}
<hr/>
<h4>Language</h4>
{this.renderLanguageFilter()}
<hr/>
</div>
<div className={'fcenter'}>
{renderItems}
<Pagination items={this.state.results} onChangePage={this.onChangePage}/>
</div>
<div className={'fright'}/>
</div>
</div>
)
}
}
export default SearchResultsPage;