私の反応アプリケーションでは、ユーザーがキーワードを入力し、結果のリストを取得します。これらの結果にフィルターを実装しようとしています。以下はフィルターのスクリーンショットです。
これが私の状態です
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;