react-native - 反应原生过滤器数据
问题描述
我正在制作一个有 N 个参与者的聊天应用程序,并且想根据名字进行搜索。
const filteredData = this.state.rawData.filter(id =>
id.members[0].first_name.toUpperCase().indexOf(event.toUpperCase()) !== -1
||
id.members[1].first_name.toUpperCase().indexOf(event.toUpperCase()) !== -1
)
是不可接受的,因为有 n 个成员,并不总是两个。
const filteredData = this.state.rawData.filter(id =>
id.members.forEach(element => {
element.first_name.toUpperCase().indexOf(event.toUpperCase()) !== -1
}
)
返回我未定义不是对象'element.first_name.toUpperCase'
为什么?
编辑:
样本数据
rawData: [
{
new: 0,
id: '1',
members:
[
{
email: 'grantmarshall@test.com',
first_name: 'Grant',
last_name: 'Marshall',
id: "1",
last_login_time: 10002,
phone_number: '1234665',
phone_number_international: '+1',
picture: '',
status:'',
username:'Grant Marshall',
user:'',
},
{
email: 'you@you.com',
first_name: 'youfn',
last_name: 'yousn',
id: "5ad0007828b1930043a5303d",
last_login_time: 10002,
phone_number: '1234665',
phone_number_international: '+1',
picture: '',
status:'',
username:'youfn youfn',
user:'',
},
{ email: 'self@self.com' }],
messages:
[
{ chat_id: 1, _id: "1", from: 'Grant Marshall', text: 'roident est duis duis sit occaecat ea eiusmod laboris mollit', time: '9:22', parse_mode: 'none' }
,
{ chat_id: 1, _id: "5ad0007828b1930043a5303d", from: 'Dave Pilkinton', text: 'Should not display', time: '9:22', parse_mode: 'none' },
{ chat_id: 1, _id: "1", from: 'Grant Marshall', text: 'my second', time: '9:22', parse_mode: 'none' }
,
{ chat_id: 1, _id: "5ad0007828b1930043a5303d", from: 'Dave Pilkinton', text: 'my second Should not display', time: '9:22', parse_mode: 'none' },
]
},
解决方案
这是因为element.first_name
在undefined
数组的第三次迭代中。
将您的条件更改为:
element.first_name && element.first_name.toUpperCase().indexOf(event.toUpperCase()) !== -1
推荐阅读
- asp.net-core - 如何使用 Octopus 在多个环境中部署 asp.net 核心应用程序?
- r - R中多个LASSO回归的“lambda.min”值不变
- aspnetboilerplate - AspNet 样板:Hangfire 队列
- typescript - 为什么在这种特定情况下使用映射类型会解析为联合?
- java - Eclipse 无法识别 Confluent jar
- .net - 在 Zebra ZXP 系列 3 打印机中打印条形码
- html - 如何设置下载链接的文件名?
- azure - Azure DevOps:无法再在项目设置中看到扩展
- linux - 为什么非 pic 代码不能使用运行时修复完全成为 ASLR?
- android - Android TextInputLayout 在 RecyclingView 内缓慢渲染