[英]How to search a FlatList via Search Bar React Native?
I have a React Native app built via Expo and I want add a search funstion to search a FlatList using a Search Bar in React Native. 我有一个通过Expo构建的React Native应用程序,我想添加一个搜索功能,使用React Native中的搜索栏搜索FlatList。 The search bar bellow is from React Native Paper.
下面的搜索栏来自React Native Paper。
This is my code (App.js): 这是我的代码(App.js):
constructor(props) {
super(props);
this.state = {
dataSource: []
}
}
state = {
firstQuery: '',
};
componentDidMount() {
const url = '// My URL'
fetch(url)
.then((response) => response.json())
.then((responseJson) => {
this.setState({
dataSource: responseJson.product
})
})
.catch((error) => {
console.log(error)
})
}
state = {
search: '',
};
updateSearch = search => {
this.setState({ search });
};
SearchFilterFunction(text) {
const newData = this.dataSource.filter(function(item) {
const itemData = item.name ? item.name.toUpperCase() : ''.toUpperCase();
const textData = text.toUpperCase();
return itemData.indexOf(textData) > -1;
});
this.setState({
dataSource: newData,
text: text,
});
}
render() {
const { search } = this.state;
const { firstQuery } = this.state;
return (
<Searchbar
placeholder="Search"
onChangeText={query => {text => this.SearchFilterFunction(text)}}
value={firstQuery} />
<FlatList
data={this.state.dataSource}
renderItem={this.renderItem} />
);
}
}
Do I need to set more default state
? 我需要设置更多
default state
吗? Is isLoading
or error: null
necessary? 是
isLoading
还是error: null
必要吗? What am I doing wrong? 我究竟做错了什么?
UPDATE This is my App.js now: 更新这是我的App.js现在:
constructor(props) {
super(props);
this.state = {
isLoading: true,
text: '',
dataSource: []
};
this.arrayholder = [];
}
state = {
firstQuery: '',
};
componentDidMount() {
const url = '// My URL'
fetch(url)
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson.product
}, {
function() {
this.arrayholder = responseJson;
}
}
)
})
.catch((error) => {
console.log(error)
})
}
state = {
search: '',
};
updateSearch = search => {
this.setState({ search });
};
SearchFilterFunction(text) {
const newData = this.dataSource.filter(function(item) {
const itemData = item.name ? item.name.toUpperCase() : ''.toUpperCase();
const textData = text.toUpperCase();
return itemData.indexOf(textData) > -1;
});
this.setState({
dataSource: newData,
text: text,
});
}
renderItem = ({item}) => {
return (
// Code
);
}
render() {
return (
<Searchbar
placeholder="Search"
onChangeText={query => {text => this.SearchFilterFunction(text)}}
value={this.state.text} />
);
}
It's giving me a 'Invariant Violation: Invalid argument passed as callback. 它给了我一个'不变违规:作为回调传递的无效参数。 Expected a function.
期待一个功能。 Instead received: [object Object]'
取而代之的是:[object Object]'
You need to tell flatlist
that if something changes in ABC
state variable then look for data change in source and re-render. 你需要告诉
flatlist
,如果ABC
状态变量发生了变化,那么在源代码中查找数据更改并重新渲染。 Without this, it won't use new values. 没有它,它将不会使用新值。
So, to tell that you need to pass one prop extraData
, 所以,要告诉你需要传递一个prop
extraData
,
<FlatList
extraData={this.state.dataSource}
data={this.state.dataSource}
renderItem={this.renderItem} />
Now if anything changes in dataSource
, flatlist
will re-render its content 现在,如果
dataSource
发生任何变化, flatlist
将重新呈现其内容
When you search, you need a key to get it right. 搜索时,您需要一把钥匙才能正确搜索。 For example, if you search by address,
例如,如果您按地址搜索,
<Searchbar
placeholder="Search"
onChangeText={{text => this.SearchFilterFunction(text)}}
value={this.state.text} />
<FlatList
data={this.state.dataSource}
renderItem={this.renderItem}
keyExtractor={item => item.address}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.