我已经命名了两个状态latestuploads
,featuredspeakers
并且正在使用Axios从单独的API获取这两个状态的数据。现在,我希望如果我从中搜索数据,featuredapeakers
则只能过滤出featuredspeakers
状态,就像latestuploads
。但是我不知道我做错了。请查看我的代码并为我提供帮助。谢谢
class SearchPage extends Component {
state = {
loading: false,
featuredspeakers: [],
latestuploads: [],
}}
componentDidMount() {
axios
.all([
axios.get(
'https://staging.islamicmedia.com.au/wp-json/islamic-media/v1/featured/speakers',
),
axios.get(
'https://staging.islamicmedia.com.au/wp-json/islamic-media/v1/featured/latest-uploads',
),
])
.then(responseArr => {
this.setState({
featuredspeakers: responseArr[0].data,
latestuploads: responseArr[1].data,
loading: !this.state.loading,
});
})}
searchFeatured = value => {
const filterFeatured = (
(this.state.latestuploads,this.state.featuredspeakers
).filter(item => {
let featureLowercase = (item.name + " " + item.title).toLowerCase();
let searchTermLowercase = value.toLowerCase();
return featureLowercase.indexOf(searchTermLowercase) > -1;
});
this.setState({
featuredspeakers: filterFeatured,
latestuploads: filterFeatured
});
};
我在这里调用我的searchFeatured函数
<View style={styles.inputContainer}>
<TextInput
onChangeText={value => this.searchFeatured(value)}
placeholder="SEARCH..."
underlineColorAndroid="transparent"
style={styles.textInput}
/>
</View>;
要搜索两个阵列,请将阵列合并为一个阵列。我看不到需要执行以下操作,两个数组将具有相同的值。为了使saerch正常工作,您需要两个数组,一个数组用于存储api中的数据,另一个数组用于显示数据,该数组将用于过滤。
this.setState({
featuredspeakers: filterFeatured,
latestuploads: filterFeatured,
});
您的状态将如下所示
state = {
latestuploadsApiData: [],
featuredspeakersApiData: [],
latestuploads: [],
featuredspeakers: []
}
然后在axios调用中为数组分配相同的值
componentDidMount = () => {
axios
.all([
axios.get(
'https://staging.islamicmedia.com.au/wp-json/islamic-media/v1/featured/speakers'
),
axios.get(
'https://staging.islamicmedia.com.au/wp-json/islamic-media/v1/featured/latest-uploads'
)
])
.then(responseArr => {
this.setState({
featuredspeakers: responseArr[0].data,
latestuploads: responseArr[1].data,
latestuploadsApiData: responseArr[1].data,
featuredspeakersApiData: responseArr[0].data,
loading: !this.state.loading
});
});
}
在您的搜索功能中,将数组和过滤器组合在一起
searchFeatured = value => {
const filterFeatured = [
...this.state.latestuploadsApiData,
...this.state.featuredspeakersApiData
].filter(item => {
const searchString = `${item.name} ${item.title}`;
return (
searchString && searchString.toLowerCase().includes(value.toLowerCase())
);
});
// both arrays will have the same data
this.setState({
featuredspeakers: filterFeatured,
latestuploads: filterFeatured
});
};
演示
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
constructor() {
super();
this.state = {
value: '',
name: 'React',
latestuploadsApiData: [
{ title: 'React todo list', name: 'Cyril' },
{
title: 'Avoid Object Mutation for Better Performance',
name: 'Michael'
}
],
featuredspeakersApiData: [
{ title: 'State of React', name: 'Junius' },
{ title: 'Javascript for Native', name: 'Peter' }
],
latestuploads: [
{ title: 'React todo list', name: 'Cyril' },
{
title: 'Avoid Object Mutation for Better Performance',
name: 'Michael'
}
],
featuredspeakers: [
{ title: 'State of React', name: 'Junius' },
{ title: 'Javascript for Native', name: 'Peter' }
]
};
}
searchFeatured = value => {
const filterFeatured = [
...this.state.latestuploadsApiData,
...this.state.featuredspeakersApiData
].filter(item => {
const searchString = `${item.name} ${item.title}`;
return (
searchString && searchString.toLowerCase().includes(value.toLowerCase())
);
});
this.setState({
featuredspeakers: filterFeatured,
latestuploads: filterFeatured
});
};
render() {
return (
<div>
<p>Start editing to see some magic happen :)</p>
<input
value={this.state.value}
onChange={e => {
this.setState(
{
value: e.target.value
},
() => {
this.searchFeatured(this.state.value);
}
);
}}
type='text'
/>
<p>
Featured speakers, will combine data from latestuploads once you start
typing.
</p>
{this.state.featuredspeakers.map(item => (
<p>{`${item.name} - ${item.title}`}</p>
))}
<hr />
<p>
Latest uploads, will combine data from featuredspeakers once you start
typing.
</p>
{this.state.latestuploads.map(item => (
<p>{`${item.name} - ${item.title}`}</p>
))}
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
</script>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句