反应类型错误：无法读取未定义的属性'includes'

Question

这是一个从firebase数据库读取数据的演示，

不包含。includes(")，它工作得很好，但我希望它只显示在textField

中键入的数据

• 我只发布了重要的部分，StackOverflow不会批准我的问题，如果它有太多的代码*

const arr = [
{ age: 1, name: 'Raphael' },
{ age: 3, name: 'Inyang' },
{ age: 6, name: 'Ifiok' },
{ age: 8, name: 'Ekpedeme' },
];
<ul style={{ listStyleType: 'none' }}>
{arr.map(function (item) {
return (
<li>
<div
style={{

justifyContent: 'flex-start',
width: 'auto',
fontSize: 'calc(4px + 2vmin)',
display: item.name.includes('Raphael') ? 'flex : 'none',
justifyContent: 'flex-start',
}}>
<p>
{item.name}: {item.age}
</p>
</div>
</li>
);
})}
</ul>

它一直显示上面的错误，可能是什么错了，请问，还有其他解决方法吗?

Answer 1

回答您随后关于使用过滤器而不是将显示设置为none的map的问题。

const arr = [
{ age: 1, name: 'Raphael' },
{ age: 3, name: 'Inyang' },
{ age: 6, name: 'Ifiok' },
{ age: 8 },
];
const filtered = arr.filter(
item => item.hasOwnProperty('name') && item.name.includes('Raphael')
);
<ul style={{ listStyleType: 'none' }}>
{filtered.map(function (item) {
return (
<li>
<div
style={{
justifyContent: 'flex-start',
width: 'auto',
fontSize: 'calc(4px + 2vmin)',
display: 'flex',
justifyContent: 'flex-start',
}}>
<p>
{item.name}: {item.age}
</p>
</div>
</li>
);
})}
</ul>

在我的手机上，所以没有测试。

编辑:现在也过滤掉数组条目没有名称属性